Swegon Component Library

Media Block: With Embedded 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="js-embedded-video-player embedded-video-player  embedded-video-player--cover">
                    <video aria-labelledby=Video title class="embedded-video-player__embedded" poster=/mocks/img/video-cover.jpg name="media">
                        <source src=https://int.swegon.com/globalassets/digizuite/2680-en-animation-swegon-inside-ready-final-1738076803.mp4?mediaformatid&#x3D;10079 type="video/mp4">
                    </video>
                    <button id=Video title class="embedded-video-player__cover">
                        <span class="embedded-video-player__label">
                            Play video (2 minojter)
                        </span>
                    </button>
                </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,
  "embeddedVideo": true
}

No notes defined.