Design System
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="<iframe id="test-player" width="560" height="315" src="https://www.youtube.com/embed/J_7J84aZJ20" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"> <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>