Embed YouTube on iPad: Buffers Forever When Launched Through Javascript API

Question

I'm having trouble embedding YouTube in my work.

I use the YouTube API to upload videos. At the top of the downloaded video, I have custom <div> controls (transparent) with just the play button ( <img> ). This is done in such a way as to hide the default YouTube player behind the play button that comes with the rest of the design on the site.

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

 // 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 great on the iPhone, but on the iPad (and Android also seems) the video switches to the first frame of the video, but then stops in the buffered state (checked through player.getPlayerState() ).

I tried to start the video with player.loadVideoById() , which also does not work (same error).

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

Any suggestions on how I can play the video using the Javascript API?

Edit:

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

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

Answer 1

Apple does not allow tags to be downloaded via scripts on iOS (to prevent the use of unnecessary bandwidth on mobile networks). Several versions of Android show the same behavior.

You will need to first initiate the video by clicking on the video itself, after which you can control the video through the API, as on desktop devices.

Answer 2

Currently, we just check before sending it to player.playVideo (); function. This is not ideal, but it works until we get the best API level fix from Google.

At the top of the inline script, you install your var:

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

Then in the click function you use:

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