Is it possible to embed a YouTube video for mobile devices in a page, rather than linking to YouTube

embedmobileyoutube

I have an page with a YouTube video embedded (using jQuery + swfobject). Currently, iOS users need to be taken to YouTube to view the video rather than viewing it within the page. Android browsers will spawn the YouTube Player without redirecting to YT, so that works fine.

Is it possible to embed YT videos so that they can play within the page for iOS?

Best Answer

Use the iframe-embedded version of the player instead of the Flash one. The embedded version is smart enough to render the appropriate player based on the device (ie, it may render the Flash version for phones like the Android that support it, or the HTML5 version for iPhone).

If you load the video on Youtube.com, there's a "Share" button that gives you the code, so you basically just need to copy-paste. It should look something like this:

<iframe 
    width="240" height="135" 
    src="http://www.youtube.com/embed/videoid" 
    frameborder="0" allowfullscreen>
</iframe>

On the developers' site there's a more advanced version of the same thing, with various parameters and a demo of the Javascript API.

Update: As of January 2015, youtube's javascript api is officially deprecated. It has been replaced with the new and improved Iframe API.

Related Topic