title: YouTube Player API is not working as documented
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
      &lt;div id="player"&gt;&lt;/div&gt;
      &lt;div id="log"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      // for convenience
     var isPlayerReady = false;
     var logEl = document.getElementById('log');
  
     function addToLog(text) {
         logEl.innerHTML = logEl.innerHTML + text + '&lt;br&gt;';
     }
  
     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 &lt;iframe&gt; (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 &amp;&amp; !done) {
             setTimeout(stopVideo, 6000);
             done = true;
         }
     }
  
     function stopVideo() {
         player.stopVideo();
     }
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I created a simple codepen to monitor the issue <a href="https://codepen.io/liberat0r/pen/OJNwqye" rel="nofollow noreferrer">here</a>. Most of this example is a direct copy of one of the examples in the <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">official docs</a>.</p>