Youtube API Not Working with iPad/Iphone/Non-Flash Device

How to fix If playback doesn't begin shortly, try restarting your device using Youtube iFrame API on iPad?

I've banged my head against the computer for hours trying to solve this one... Here's what I've found.

This is happening because of Apple's draconian iOS limitation: web pages can only start playing audio/video when responding directly to user feedback. (Note this limitation only affects the first time audio/video is played on a page.)

Usually, to work around Apple's limitation, it's sufficient to make sure your play() call happens directly in an event handler (e.g., a click handler). This works for the Web Audio API and normal HTML5 videos -- but something about the YouTube player prevents this from working for YouTube.

As a result, the solution for YouTube apparently is to require the user to click the YouTube video itself to initiate playback. From then on, you can control it using the YouTube iframe API (play, pause, seek, etc.). But you cannot control the YouTube video using the API until after the user has clicked the video.

For a foolproof user experience, you can hide all of your player-controlling UI and tell users to click the YouTube video itself to start playback. Then, once, the user has clicked the video once, you can activate your UI. Of course, you should design this only to apply to iOS.

Thanks for the headaches, Apple!

Youtube autoplay not working on mobile devices with embedded HTML5 player

As it turns out, autoplay cannot be done on iOS devices (iPhone, iPad, iPod touch) and Android.

See https://stackoverflow.com/a/8142187/2054512 and https://stackoverflow.com/a/3056220/2054512

Youtube object embed ipad

Your code only links to the YT flash video player (not even pointing to a video).

Why not just use the automatically generated "share" code of YouTube?
Look out for the "embed" button in the "share" section right below your video and copy the default code. You can even activate some additional options:

<iframe width="560" height="315" src="http://www.youtube.com/embed/KVHO-FWuMXs" frameborder="0" allowfullscreen></iframe>

This should work for all browsers.

Edit:
if you need the object/param syntax, you can switch to the "old" way of embedding videos: the (currently fourth) option can be ticked to use this deprecated code:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Test it with this music video from Psy:
http://www.youtube.com/watch?v=KVHO-FWuMXs

javascript to play youtube video isn't working

I think you need to add &enablejsapi=1 to the querystring of the URL referencing the video in your <embed> object.

Also, try replacing your <embed> element with an <object> element. Here's a working example.

A note about iOS/Mobile Webkit:

Apparently, according to this answer, Apple explicitly prohibits automated control of embedded media in Safari or other Mobile Webkit browsers, requiring the iOS user to interact directly with the video object to initiate playback. This goes for object and embed elements, as well as HTML5 video and audio elements.

---

Related Topics