Embedded YouTube not autoplaying

Apologies for the delay, I was out of the office over the new year break.

We did discover this problem back in November and have a task to update our docs with a new script, shown below for convenience:

<script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      var playerState = -1;
      var readyCalled = false;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          suggestedQuality: 'hd1080',
          height: '1080',
          width: '1920',
          videoId: '9Auq9mYxFEE',
          events: {
            'onReady': onPlayerReady,
            'onError': onError,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        console.log('onPlayerReady');
        readyCalled = true;
        event.target.playVideo();
      }
      function onError(event) {
         console.log('Error');
         console.log(event);
      }
      function onPlayerStateChange(event) {
         console.log('Player Status: ' + event.data);
         if (readyCalled && playerState === 3 && event.data === -1) {
            console.log('Buffering failed, restarting');
            setTimeout(function() { player.playVideo(); }, 1000);
         }
         playerState = event.data;
      }
</script>

It isn’t clear why but for some reason buffering fails sometimes - I suspect its some load ordering gremlin between WinForms and WFP.

Thanks for taking the time to report on GitHub.

Cheers,
Dan

1 Like