CODEWITHSUNDEEP
javascriptapiyoutube
altereg0
altereg0

Reputation: 153

YouTube Player API is not working as documented

It seems that the YouTube Player API is not working at the moment. The player will initialize properly but none of the methods or events are working.

<div class="flex">
    <div id="player"></div>
    <div id="log"></div>
</div>

<script>
    // for convenience
   var isPlayerReady = false;
   var logEl = document.getElementById('log');

   function addToLog(text) {
       logEl.innerHTML = logEl.innerHTML + text + '<br>';
   }

   window.setTimeout(function () {
       if (!isPlayerReady) {
           addToLog('5 seconds have passed and the player has not fired the onReady event. This is a good indication that the API is not working properly.');
       }
   }, 5000);
   
   // from here on, the code is a direct copy of an example from the official docs

   // 2. This code loads the IFrame Player API code asynchronously.
   var tag = document.createElement('script');

   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   // 3. This function creates an <iframe> (and YouTube player)
   //    after the API code downloads.
   var player;

   function onYouTubeIframeAPIReady() {
       addToLog('onYouTubeIframeAPIReady fired, loading Player');
       player = new YT.Player('player', {
           height: '390',
           width: '640',
           videoId: 'M7lc1UVf-VE',
           events: {
               'onReady': onPlayerReady,
               'onStateChange': onPlayerStateChange
           }
       });
   }

   // 4. The API will call this function when the video player is ready.
   function onPlayerReady(event) {
       isPlayerReady = true;
       addToLog('onPlayerReady fired');
       event.target.playVideo();
   }

   // 5. The API calls this function when the player's state changes.
   //    The function indicates that when playing a video (state=1),
   //    the player should play for six seconds and then stop.
   var done = false;

   function onPlayerStateChange(event) {
       addToLog('onPlayerStateChange fired');
       if (event.data == YT.PlayerState.PLAYING && !done) {
           setTimeout(stopVideo, 6000);
           done = true;
       }
   }

   function stopVideo() {
       player.stopVideo();
   }
    </script>

I created a simple codepen to monitor the issue here. Most of this example is a direct copy of one of the examples in the official docs.

Upvotes: 4

Views: 1164

Answers (1)

Kim Chouard
Kim Chouard

Reputation: 111

[EDIT] Found a solve from this Google Issue Tracker. It seems that it's a browser issue.

Try those:

Hope that helps 🙃

===

You're not alone! I have code using the on... events (onReady, etc), that worked a few days ago and suddenly stopped working with no code change.

It looks like it started on September 9th, which aligns with a Youtube Data API release (see revision history for Sept. 9). But I don't see anything in their list that would compromise the iframe events/functions 🤔

That's how I far I got, hope that gives a hint to someone to get to a resolution of this. 🤷🏼‍♂️ Will update this comment as findings arise.

Upvotes: 5

Related Questions