ba-block-cli/src/blocks/video/video.js

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    // console.log('Video init');
    var videoSections = document.querySelectorAll('.video-section-wrapper');
    if (videoSections && videoSections.length) {
        videoSections.forEach(function(videoSection) {

            // Check the videos
            var videos = videoSection.querySelectorAll('.js-video'),
                modal = videoSection.querySelector('.video-modal');

            // Check for videos
            if (videos && videos.length && modal) {

                // On click event
                videos.forEach(function(video) {
                    video.addEventListener("click", function() {
                        var url = video.getAttribute('data-url');
                        console.log({url: url});
                        if (url) {
                            var iframe = modal.querySelector('.video-iframe');
                            if (iframe) {
                                iframe.setAttribute('src', url);
                                modal.classList.add('show');
                            }
                        }
                    });
                });
            }

			modal.addEventListener('click', function(evt) {
				if (!evt.target.classList.contains('modal-close') && evt.target !== this) {
					return;
				}

                // remove the iframe URL
                var iframe = modal.querySelector('.video-iframe');
                console.log({iframe: iframe});
                if (iframe) {
                    iframe.setAttribute('src', '');
                }

				modal.classList.remove('show');
			})
        });
    }
});