Youtube Iframe API not working for mobile devices

mobileyoutubeyoutube-api

I am confused. The Youtube Iframe API with the standard example: https://developers.google.com/youtube/iframe_api_reference?hl=de always used to work for my mobile devices and does not work anymore now..

I´ve tried this fiddle: http://jsfiddle.net/77PJB/3/

<div id="player"></div>
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;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
    height: '250',
    width: '444',
videoId: 'M7lc1UVf-VE',
events: {
  'onReady': onPlayerReady
}
});
}

function onPlayerReady(event) {
event.target.playVideo();

}

with the iPad,iPhone and Samsung galaxy nexus. The video does not play.. Did something change?

Thank you

Best Answer

Mobile Considerations

Autoplay and Scripted Playback

The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

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

From: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

A simple workaround 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.

Related Topic