YouTube embed on iPad: Buffers forever when starting via Javascript API

9
votes

I'm having some issues getting a YouTube embed to work.

I'm using the YouTube API to load the video. On top of the loaded video I have a custom controls <div> (transparent) with just a play button (an <img>). It is done in this way to hide the default YouTube player behind a play button that goes with the rest of the design on the site.

The <div> overlays the entire loaded iFrame, so the player itself is not clickable - I use a click event on the <div> to start the video instead:

// Inside onYouTubePlayerAPIReady():
var player = new YT.Player(playerId, {
  height: height,
  width: '100%',
  videoId: videoId,
  playerVars: {
    html5: '1',
    controls: '0',
    rel: '0',
    showinfo: '0',
    modestbranding: '1',
    theme: 'light',
    color: 'white',
    wmode: 'transparent',
    suggestedQuality: "large"
  }
});

$(".youtube-player-controls").bind("click", function(e){
  if (!player || !player.getPlayerState) return false;
  if (player.getPlayerState() == YT.PlayerState.PLAYING) player.pauseVideo();
  else player.playVideo();
  return false;
});

Works fine on iPhone, but on iPad (and Android too it seems) the video switches to the first frame of the video, but then stalls at the buffering state (checked via player.getPlayerState()).

I tried starting the video with player.loadVideoById() which doesn't work either (same error).

If I remove the overlaying controls <div> and thus allow the user to actually click on the video it works fine.

Any suggestions as to how I can get the video to play using the Javascript API?

Edit:

I changed the embed code a little bit, i.e. I added the html5=1 as described in Force HTML5 youtube video. This changes the contents of the embedded iFrame to use the HTML5 player, but does not solve the problem.

I tried it to see if it could work as described in http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html.

2
ipadyoutubeyoutube-api
I too seem to encounter this problem as well. Video keeps on loading forever on iPad and even iPhone 4. – mr1031011
For me it actually works as intended on iPhone 4. Haven't been able to test iPhone 5. – Woodgnome
I'm having the same problem. In my case it doesn't seem to be related to overlay on the controls, because my button is behind the video. Video loads, starts to buffer and sticks on black screen. – And Finally

2 Answers

0
votes

Apple do not allow tags to be loaded via scripts on iOS (to prevent using unnecessary bandwidth while on mobile networks). Several versions of Android show the same behaviour.

You will have to get the user first initiate the video by clicking on the video itself - after that you will be able to control the video via the API as on desktop devices.

-1
votes

Currently we're just doing a check before sending in the player.playVideo(); function. It's not ideal but it works until we get a better API level fix from Google.

At top of the embed script you set your var: 

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Then in the click function you use:

if (!isiPad) {
player.playVideo();
}