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>