I am working on a site that creates dynamic ePub ebooks specifically for iPad, via iBooks.
It needs to support youtube video playback, so I am using the html5 <video> tag which is working, when I know the direct path to the video.
Is there a way to embed a youtube video using the html5 <video> tag, as opposed to using the youtube embed code?
The ClickToPlugin (a.k.a. ClickToFlash) Safari extension is capable of replacing YouTube embeds with <video>. Perhaps its code for doing that may be of use.
It looks complicated because it is handling many different kinds of embeds, but perhaps you can figure out the specific result for your case — or, create a web page with the video embedded, apply ClickToFlash, and look at the result it produces in the Web Inspector.
YouTube does not expose the direct URLs to their videos. If they did that, they couldn't track the views, serve ads, allow the owner of the video control over its distribution, or brand the player with their logo.
You could try to devise something to get around this, but bypassing the YouTube player means bypassing their ability to control content, something that is understandably prohibited by their ToS:
You agree not to circumvent, disable or otherwise interfere with security-related
features of the Service or features that prevent or restrict use or copying of any
Content or enforce limitations on use of the Service or the Content therein.
Not a great plan if you want your video to keep running once you've published your content.
Instead, your best bet is to use the options that YouTube does expose to allow you to control the experience you present to an embedded player.
Unfortunately, the only supported options right now are an <embed> tag and an <iframe> tag, and the <embed> tag would restrict you to Flash.
The IFrame approach is the best available option right now, and this tag shows how to twiddle your embed URL to get a player that includes only a minimum of YouTube-ness:
<iframe src=
"http://www.youtube.com/embed/mbOEknbi4gQ?autoplay=1&controls=0&showinfo=0"
frameborder="1" width="534" height="400"></iframe>
The parameters in use here are:
You can find a full list of supported parameters here: https://developers.google.com/youtube/player_parameters#Parameters
I know it's not the answer you're after, but it's unlikely to change anytime soon, and as another responder mentioned, this approach does work. In fact, it is current industry practice for presenting connected video in digital print publications.
Good luck!
