lab.elastik

Launch Youtube video when video enters viewport

Launch Youtube video when video enters viewport

How to launch an emnedded Youtube video when it enters the viewport: This can be achieved by leveraging the Intersection Observer API, which allows you to configure a callback function that executes when an observed element enters or exits the viewport.

Important Notes:

    • The YouTube iframe API requires that you append ?enablejsapi=1 to the URL to enable control of the iframe via postMessage.
    • The postMessage method is used to send commands to the YouTube video player, such as playVideo and pauseVideo.

For a single video

				
					<!-- for 1 video -->

<iframe id="youtubeVideo" width="560" height="315" 
        src="https://www.youtube.com/embed/EDkABFzGTGg?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var video = document.getElementById('youtubeVideo');
    var options = {
        root: null, // observing relative to viewport
        rootMargin: '0px',
        threshold: 0.5 // trigger when at least 50% of the video is visible
    };

    function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                // Video enters the viewport - play the video
                video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', 'https://www.youtube.com');
            } else {
                // Video exits the viewport - pause the video
                video.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', 'https://www.youtube.com');
            }
        });
    }

    var observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(video);
});
</script>

For multiple videos

				
					<!-- for several videos  -->

<iframe id="youtubeVideo1" width="560" height="315" 
        src="https://www.youtube.com/embed/EDkABFzGTGg?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        
<hr style="margin-bottom:50vh">

<iframe id="youtubeVideo2" width="560" height="315" 
        src="https://www.youtube.com/embed/_AOA6M9Ta2I?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var videos = document.querySelectorAll('iframe[id^="youtubeVideo"]'); // Selects iframes with IDs starting with 'youtubeVideo'
    var options = {
        root: null, // observing relative to viewport
        rootMargin: '0px',
        threshold: 0.5 // trigger when at least 50% of the video is visible
    };

    function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                // Video enters the viewport - play the video
                entry.target.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', 'https://www.youtube.com');
            } else {
                // Video exits the viewport - pause the video
                entry.target.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', 'https://www.youtube.com');
            }
        });
    }

    var observer = new IntersectionObserver(handleIntersect, options);
    videos.forEach(function(video) {
        observer.observe(video); // Observe each video
    });
});
</script>