Video Playlist Block

<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around h-margin-bottom-4">
            <div class="col col--span-12 col--span-m-10 col--span-l-8 col--no-gutter h-text-align-center-m">
                <h2 class="headline-2">Simple and smart – IQlogic</h2>
                <p>
                    A smart system also has to be easy for the user. The IQlogic control system with its award-winning user
                    interface and convenient IQnavigator hand-held terminal makes it easy for you to unlock the full potential
                    of GOLD. Naturally, GOLD is readied for online connection and communication with the main control system.
                    Thanks to our built-in WiFi, you can connect with the unit’s control functions via your smartphone or other
                    mobile device.
                </p>
            </div>
        </div>

        <div class="js-video-playlist">
            <div class="row">
                <div class="col col--no-gutter-l-down col--gutter-right-large-l col--span-12 col--span-l-4">
                    <h3 class="headline-5">All videos</h3>
                    <div class="h-margin-bottom-4">
                        <ul class="playlist" role="tablist">
                            <li class="playlist__item " role="tab" id="playlist-item-web-demo-iqlogic" aria-selected="true" data-content="&lt;p&gt;A smart system also has to be easy for the user. The IQlogic control system with its award-winning user interface and convenient IQnavigator hand-held terminal makes it easy for you to unlock the full potential of GOLD. Naturally, GOLD is readied for online connection and communication with the main control system. Thanks to our built-in WiFi, you can connect with the unit’s control functions via your smartphone or other mobile device.&lt;/p&gt;" data-video-id="JMEGMB7M_BU" data-video-cover="/mocks/img/IQlogic.jpg" data-video-label="Play video (1:01 min)">
                                <button aria-controls="playlist-item-web-demo-iqlogic" class="playlist__button">
                                    <span class="playlist__title">Web demo IQlogic</span>
                                    <span class="playlist__label">1:01 min</span>
                                </button>
                            </li>
                            <li class="playlist__item " role="tab" id="playlist-item-rotary-heat-exchanger–gold-rx" aria-selected="false" data-content="&lt;p&gt;Units with rotary heat exchangers allow you to achieve the ultimate in temperature and annual energy efficiency; our patented heat exchangers with turbulent air flow being uniquely effective. This, combined with the short installation length typically makes them the first choice for most applications. The turbulent flow in the rotor and the Carry-Over Control feature makes them ideally compatible with VAV and DCV system applications. The rotors can be surface-treated in different ways. For example, with the RECOsorptic sorption technology coating for enhanced humidity recovery, or epoxy for heavy-duty environments. GOLD RX is designed to minimise the risk of air and odour transmission between the air flows.&lt;/p&gt;" data-video-id="u1hAU6Dwbqg" data-video-cover="/mocks/img/rotary-heat-exchanger.jpg" data-video-label="Play video (1:09 min)">
                                <button aria-controls="playlist-item-rotary-heat-exchanger–gold-rx" class="playlist__button">
                                    <span class="playlist__title">Rotary heat exchanger – GOLD RX</span>
                                    <span class="playlist__label">1:09 min</span>
                                </button>
                            </li>
                            <li class="playlist__item " role="tab" id="playlist-item-discover-the-l-concept" aria-selected="false" data-content="&lt;p&gt;Renovation projects often involve the replacement of old air handling units in small plant rooms.  To meet today&#x27;s demands for energy efficiency and to comply with the ErP Energy directive, a physically larger air handling unit is required, but it is seldom possible to change the size of the plant room.&lt;/p&gt;&lt;p&gt;This is where the new GOLD Top range comes in, as it is designed to meet energy efficiency requirements without the need to change the size of the plant room. The new L -concept allows the unit to be connected vertically and horizontally. This means that larger units can be installed and maximum utilisation of space inside the plant room is ensured.&lt;/p&gt;" data-video-id="_pkHS2yBsdw" data-video-cover="/mocks/img/l-concept.jpg" data-video-label="Play video (0:52 min)">
                                <button aria-controls="playlist-item-discover-the-l-concept" class="playlist__button">
                                    <span class="playlist__title">Discover the L-concept</span>
                                    <span class="playlist__label">0:52 min</span>
                                </button>
                            </li>
                            <li class="playlist__item playlist__item--active" role="tab" id="playlist-item-counter-flow-plate-heat-exchanger–gold-rx" aria-selected="false" data-content="&lt;p&gt;A counter-flow heat exchanger is an excellent choice for applications in which you want to separate the air flows. GOLD PX is available in two versions depending on whether your priority is superior temperature efficiency or low pressure drop.&lt;/p&gt;&lt;p&gt;The RECOflow heat exchanger has a high air-seal class, which minimises internal 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.&lt;/p&gt;" data-video-id="FiF8Bf28yU8" data-video-cover="/mocks/img/counter-flow-plate-heat-exchanger.jpg" data-video-label="Play video (2:23 min)">
                                <button aria-controls="playlist-item-counter-flow-plate-heat-exchanger–gold-rx" class="playlist__button">
                                    <span class="playlist__title">Counter-flow plate heat exchanger - GOLD PX</span>
                                    <span class="playlist__label">2:23 min</span>
                                </button>
                            </li>
                        </ul>

                    </div>
                </div>
                <div class="col col--no-gutter col--span-12 col--span-l-8">
                    <div class="h-margin-bottom-3">
                        <div class="video-player video-player--cover" data-video-id=JMEGMB7M_BU aria-busy="false">
                            <div class="video-player__youtube"></div>
                            <button class="video-player__cover" style="background-image: url(/mocks/img/IQlogic.jpg);">
                                <span class="video-player__label">
                                    Play video (1:01 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 class="h-margin-top-3">
                            <div class="show-more show-more--gray show-more--small">
                                <div class="show-more__content js-show-more-content">
                                    <h3 class="js-video-playlist-title headline-4">Web demo IQlogic</h3>
                                    <div class="js-video-playlist-body">
                                        <p>
                                            A smart system also has to be easy for the user. The IQlogic control system with its
                                            award-winning user
                                            interface and convenient IQnavigator hand-held terminal makes it easy for you to unlock the
                                            full potential
                                            of GOLD. Naturally, GOLD is readied for online connection and communication with the main
                                            control system.
                                            Thanks to our built-in WiFi, you can connect with the unit’s control functions via your
                                            smartphone or other
                                            mobile device.
                                        </p>
                                    </div>
                                </div>
                                <div class="show-more__btn-holder js-show-more-btn-holder">
                                    <button class="show-more__btn js-show-more-btn" data-hide-text="Dölj">Visa mer</button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="prev-next-navigation">
                        <div class="prev-next-navigation__item prev-next-navigation__item--prev prev-next-navigation__item--hidden">
                            <button class="prev-next-navigation__button" aria-controls="playlist-item-web-demo-iqlogic">
                                <div class="prev-next-navigation__icon">
                                    <svg class="icon " focusable="false">
                                        <use xlink:href="#icon-slider-arrow"></use>
                                    </svg>
                                </div>
                                <div class="prev-next-navigation__content">
                                    <span class="prev-next-navigation__label">View previous</span>
                                    <span class="prev-next-navigation__title">Web demo IQlogic</span>
                                </div>
                            </button>
                        </div>
                        <div class="prev-next-navigation__item prev-next-navigation__item--next">
                            <button class="prev-next-navigation__button" aria-controls="playlist-item-rotary-heat-exchanger–gold-rx">
                                <div class="prev-next-navigation__content">
                                    <span class="prev-next-navigation__label">View next</span>
                                    <span class="prev-next-navigation__title">Rotary heat exchanger – GOLD RX</span>
                                </div>
                                <div class="prev-next-navigation__icon">
                                    <svg class="icon " focusable="false">
                                        <use xlink:href="#icon-slider-arrow"></use>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</section>