1

I've spent way too many hours on this with very little success. We have a client with a site that has a YouTube video popup when the page loads. It autoplays on desktop and shows the Youtube play button on mobile since autoplay is not supported on mobile. I am using the iFrame JS API to instantiate the video player (code examples below). This setup is working perfectly on desktop, but on mobile devices (Android or iOS), between myself and my coworkers, clicking the Youtube play button only plays the video about 80% of the time. The rest of the time the video loading spinner just spins and nothing happens. If I close a reload the player using the site controls it will play, but not initially.

I know that this will not be an issue for the majority of users viewing the site but I know our client is going to go ape crazy if, out of 100 reloads on their iPhones, even 10 of them result in this behavior.

I am instantiating the player as follows:

1) I am including a "hard copy" of the Youtube iframe api JS on the site first.

2) I have an object controlling the display of the youtube "modal" window that contains the player target -- when the function is called it does the following:

// Write a div element to the container
_instance.videoContainer.innerHTML = '<div id="youtube-player"></div>';
// Grab a reference to it
_instance.el = document.getElementById('youtube-player');
// Call the YT player API
_instance.player = new YT.Player('youtube-player', {
     playerVars: { // trying a bunch of different params with no success
          playsinline : 1 , 
          origin : window.location.origin , 
          autoplay : 1 , 
          wmode: "opaque" , 
          iv_load_policy : 3 
     },
     videoId: videoId , // This is passed to the function
     events : {
          onReady : function(){
               console.log('resolved player');
               // another function that just changes the container visibility
               _instance.play();
          },
          onStateChange : function( event ){
             if( event.data == YT.PlayerState.ENDED ){
                _instance.close();
             }
          }
      }
});

  1. At this point, the video is either playing automatically in desktop 100% of the time, or it has shown the Youtube player with the video thumbnail and big red play button on mobile. This is where the trouble starts -- most of the time it plays fine, the rest of the time it just spins and spins and never plays. What's interesting is, on Android, if I blur the window and reopen it, I can click the play button again and it will play.

  2. It shouldn't matter at this point, but I am destroying the div and the player reference when the modal is closed.

I've tried pretty much everything I can think of...

  • The Youtube video is somehow being throttled and only showing so many times through the iframe to the origin? I added the 'origin' property to the params thinking this might be the case, but it didn't seem to make much of a difference. I seem to have a higher success rate than my coworkers loading the video.
  • Is there some reason to asynchronously load the youtube iframe script as in the examples, rather than loading a copy from my site?

That's all I can think of at this point... is there something I'm missing? Thanks.

user446882
  • 357
  • 5
  • 16

2 Answers2

0

There is a related thread which stated that the autoplay function is not allowed for most mobile devices.

From this documentation:

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

A simple workaround is to have a custom looks of the "play" button:

Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.

Hope this helps!

abielita
  • 13,147
  • 2
  • 17
  • 59
  • Thanks for the reply. This has been a truly frustrating problem. The issue, though, isn't with autoplaying. It's that clicking the actual YouTube player's play button on mobile is only successfully playing the video some of the time, with the rest of the time only resulting in a hanging loading spinner. – user446882 Jul 31 '17 at 06:50
0

I ran into the almost the same exact problem. For us it was specific to cellular connections.

If the embed is larger than ~360px wide, the player attempts to serve up quality at "large" or higher to which AT&T and Verizon are throttling.

The result we see: player enters buffering state and cannot achieve playback.

Tests over T-Mobile work OK without issue.

Players embedded at or below 360px wide play OK on all networks at quality of "medium" or lower.

DevMike
  • 1,630
  • 2
  • 19
  • 33