1. Design System
  2. Components
  3. Video modal windows

Video modal windows Deprecated

Video modal windows display a pop up modal with an embedded video.

Note: This component has been deprecated and no longer being used.

<div class="cp-video-link left">
    <a href="#" class="cp-video-link-text">
        <span class="cp-video-icon fas fa-play-circle"></span>
    </a>
</div>
<div class="js-video-modal" data-video="&lt;iframe id=&quot;test-player&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/J_7J84aZJ20&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;">
    <div class="modal js-modal">
        <div class="modal-background" />
        <div class="is-table cp-video-table">
            <div class="is-table-cell has-text-centered cp-video-table-cell">
                <div class="modal-content is-clipped">
                    <div class="video-container" />
                </div>
            </div>
        </div>
        <button id="close-button" class="modal-close is-large" aria-label="close" />
    </div>
</div>
<script>
var stopVideo = function ( element ) {
    var iframe = element.querySelector( 'iframe');
    var video = element.querySelector( 'video' );
    var pauseButton = document.getElementById('close-button');
    if ( iframe !== null ) {
        var iframeSrc = iframe.src;
        iframe.src = iframeSrc;
    }
    if ( video !== null ) {
        video.pause();
    }
    pauseButton.addEventListener('click', function () {
        stopVideo();
    });
};
</script>