Swegon Component Library

Media Block: With Video 

<section class="panel 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around">
            <div class="col col--span-s-10 col--span-l-8">
                <div class="video-player video-player--cover" data-video-id=tMRqsKzuMd4 aria-busy="false">
                    <div class="video-player__youtube"></div>
                    <button class="video-player__cover" style="background-image: url(/mocks/img/video-cover.jpg);">
                        <span class="video-player__label">
                            Play video (2 min)
                        </span>
                    </button>
                    <div class="video-player__overlay">
                        <div class="video-player__overlay-content">
                            <p>Du måste godkänna <a href="#">cookies för marknadsföring</a> om du vill visa den här typen av innehåll från Swegon.</p>
                            <button class="button button--cover video-player__overlay-button ">
                                <span class="button__label">Jag godkänner</span>
                            </button>
                        </div>
                        <div class="progress-indicator video-player__loader"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
 
{{#> @panel modifiers=modifiers}}
<div class="row row--justify-around">
    <div class="col col--span-s-10 col--span-l-8">
        {{#if video}}
        {{#if embeddedVideo}}
        {{render "@embedded-video-player"}}
        {{else}}
        {{render "@youtube-player"}}
        {{/if}}

        {{else}}
        <img src="{{mediaBlockImage.src}}" alt="{{mediaBlockImage.alt}}" />
        {{/if}}

        {{#if content}}
        <div class="row row--justify-around">
            <div class="col col--no-gutter col--span-12 col--span-m-10 h-margin-top-3">
                <div class="main-content">
                    <h2>
                        Counter-flow plate heat exchanger - GOLD PX
                    </h2>
                    <p>
                        A counter-flow heat exchanger is an excellent choice for applications in which you want to
                        separate the air flows.
                        GOLD PX is available <a href="#">in two versions</a> depending on whether your priority is
                        superior temperature efficiency or low pressure drop.
                        The RECOflow heat exchanger has a high air-seal class, which minimises embedded leakage. This
                        makes the GOLD PX
                        an excellent choice for residential properties. Cold weather and humid extract air pose a risk
                        of frost formation in the heat
                        exchanger. To prevent this, our GOLD PX integrates RECOfrost – the best anti-freeze protection
                        on the market. This unique feature
                        uses the latest data from the unit to provide adaptive and demand-controlled adjustment for
                        optimised energy recovery. RECOfrost
                        adjusts the pressure drop across the heat exchanger in periods when full recovery is not needed,
                        e.g. in spring and autumn. The
                        result is superlative temperature efficiency and energy balance, in any climate.
                    </p>
                    {{#if darkTheme}}
                    <a class="button button--ghost" href="#">Read more</a>
                    {{else}}
                    <a class="button" href="#">Read more</a>
                    {{/if}}
                </div>
            </div>
        </div>
        {{/if}}
    </div>
</div>
{{/@panel}}
 
{
  "modifiers": "compact",
  "mediaBlockImage": {
    "src": "/mocks/img/video-cover.jpg",
    "alt": ""
  },
  "video": true
}

No notes defined.