8

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

Improve this question
2
  • i think i figured it out.. the autplay function is not allowed.. so if you cut out that it works Commented Jan 14, 2014 at 9:23
  • 1
    If you figured out the solution, you should answer to your own question. Commented Jan 14, 2014 at 16:04

5 Answers 5

Reset to default
9

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The autplay function is not allowed for most mobile devices, so if you cut out that it works

Improve this answer

Comments

0

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

Improve this answer

Comments

0

use these player variables

playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
Improve this answer

Comments

-1

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(); };
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.