Note: This component has been deprecated and no longer being used.
Video modal windows Deprecated
Video modal windows display a pop up modal with an embedded video.
<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>