Reputation: 2316
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
Upvotes: 8
Views: 12440
Reputation: 1
use these player variables
playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
Upvotes: 0
Reputation:
I had this same issue too. Worked well on PC but not on phones. After a little research I found out that the video I was trying to play was CopyRighted. Due to this, the video was not playing on phones. Hope this helps someone out
Upvotes: 0
Reputation: 74018
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
.
Upvotes: 9
Reputation: 19
Only .playVideo() if the browser is not a mobile browser. There are many ways to detect a mobile browser as shown in this answer: Detecting a mobile browser
For example:
if(typeof window.orientation == 'undefined'){
player.playVideo();
};
Upvotes: -1
Reputation: 2316
The autplay function is not allowed for most mobile devices, so if you cut out that it works
Upvotes: 1