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

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    var videoSections = document.querySelectorAll('.videos-section');

        // console.log(videoSections);
        if (videoSections && videoSections.length) {
        videoSections.forEach(function(videoSection) {

            // console.log(videoSection);
            var videos = videoSection.querySelectorAll('.js-video'),
                bigVideo = videoSection.querySelector('.big-video'),
                smallVideos = videoSection.querySelector('.small-videos');

                // console.log([smallVideos, bigVideo, bigVideo.offsetHeight, bigVideo.clientHeight]);
                smallVideos.setAttribute('style', 'max-height:'+bigVideo.offsetHeight+'px');

            if (videos && videos.length) {
                videos.forEach(function(video) {
                    video.addEventListener('click', function() {
                        if (!this.classList.contains('active')) {
                            var src = this.getAttribute('data-src');
                            if (src && src.length) {
                                // console.log(src);

                                // Remove active classes;
                                videos.forEach(function(vid) {
                                    vid.classList.remove('active');
                                });
                                this.classList.add('active');
                
                                var frame = videoSection.querySelector('.video-frame'),
                                    iframe = frame.querySelector('iframe');

                                // Set src
                                iframe.setAttribute('src', src);
                            }
                        }
                    });
                });
            }
        });
    }
});