I'm using the YouTube Javascript API to embed a YouTube video in my webapp and it works perfectly everywhere (including IE8!), but not on my iPad in Safari.
The code:
$(function() {
var scriptTag = $('<script></script');
scriptTag.attr('src', 'https://www.youtube.com/iframe_api');
$('body').append(scriptTag);
});
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: videoHeight,
width: videoWidth,
videoId: videoId,
suggestedQuality: "hd720",
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
alert('change:' + event.data);
}
The setup works fine, the onPlayerReady event fires, but the video doesn't start playing. onPlayerStateChange fires twice, once with a -1 (unstarted) and then a 3 (buffering), but nothing plays and no controls appear.
I've tried this with different videos and I get the same result.
Here's a live example:
