Search code examples
javascripthtmlbootstrap-4youtubeyoutube-api

Refresh / Reload page on pause youtube iframe api

I have a problem with my code. I want to refresh the page on pause or exit of full screen. The exit on Full screen works. The pause using the youTube iframe API does not "onstatechange". Any suggestions I could be missing? It appears the onstatechange is not being received. Could there be a Issue with the way I have constructed the "onYouTubeIframeAPIReady()"? I have followed the documentation but this continues to not refresh when the video is paused.

Thanks

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .responsive-video {
            overflow: hidden;
            padding-bottom: 56.25%;
            position: relative;
            height: 0;
        }
        .responsive-video iframe {
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }
    </style>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
    <div class="container">
        <div class="responsive-video">
            <iframe id="youtubeIframe" width="560" height="315" src="https://www.youtube.com/embed/oJUvTTGVdTMyY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        var player;
        var iframe = document.getElementById('youtubeIframe');
        var src = iframe.src;

        function onYouTubeIframeAPIReady() {
            console.log('YouTube IFrame API Ready');
            player = new YT.Player('youtubeIframe', {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            console.log('Player Ready');
        }

        function onPlayerStateChange(event) {
            console.log('Player State Changed:', event.data);
            if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
                console.log('Playback stopped or paused, reloading the player');
                setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
            }
        }

        function reloadPlayer() {
            console.log('Reloading player');
            iframe.src = src; // Reset the src attribute to reload the iframe
        }

        function checkFullscreen() {
            if (!document.fullscreenElement && 
                !document.webkitFullscreenElement && 
                !document.mozFullScreenElement && 
                !document.msFullscreenElement) {
                console.log('Exiting fullscreen, reloading the player');
                setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
            }
        }

        // Add event listeners for fullscreen change
        document.addEventListener('fullscreenchange', checkFullscreen);
        document.addEventListener('webkitfullscreenchange', checkFullscreen);
        document.addEventListener('mozfullscreenchange', checkFullscreen);
        document.addEventListener('MSFullscreenChange', checkFullscreen);

        window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    </script>
</body>
</html>
Solution

  • Just add this code ?enablejsapi=1 at the end of the URL so that it becomes https://www.youtube.com/embed/oJUvTTGVdTMyY?enablejsapi=1

    This will enable the possibility to control the player events using JS

    And in the reloadPlayer function, you forgot to call onYouTubeIframeAPIReady(); to reinitialize the player.