On Thursday the YouTube blog popped up some new embed code. This time round they're giving us some <iframe> code so you can offer up both HTML 5 and Flash in one quick embed. That's pretty cool.The new iframe is a quick bit of code that has the standard attributes (see below). Then, depending on the viewers settings and preferences YouTube will serve up either HTML 5 or Flash. That means that you can now embed once and YouTube will decide automatically which player they will serve.
Here's an example code:
<iframe class="youtube-player" type="text/html" width="640″ height="385″ src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0″>
What this type of embed will allow is instant compatibility with mobiles phones and other devices that don't have Flash support but that have an HTML5 capable browser (or will in the future). The <iframe> embed is still in testing and it can't do everything (see below), so if you're not currently in their HTML 5 beta you won't see the HTML 5 player of course.
Limitations include the fact that it can't play videos with ads and that only a pseudo-full-screen mode is available which first flips the browser to full screen then stretches the player to fit it.
Now this could certainly be a stick in the eye to Apple right? If you can get the video in Safari who needs an iPhone OS app right?
I did some testing and found some interesting things.
Here's an embed with their video:
You can see that on the left it's HTML 5 (Google Chrome) and on the right Flash (Firefox 3.6.6). Now that was their video they had in the example, so I thought I would try another video I had recently uploaded to the Gamers Daily News channel and the results are below:
Notice that in this one, both are Flash. So apparently not all videos are being transcoded to be HTML5 friendly or they are but only to WebM. I can't see any other reason why this would happen. Now I'm not running the developer build of Chrome with WebM support, it's just standard version 5.0.375.99 (how did they get to version 5 so quickly?!) so that could be why.
Now, I also tested on my iPhone in Safari, because, well, why not, right? We all want to be able to embed videos in pages that can be viewed on the iPs (pad/pod/phone) yes? Well, much to my surprise and YouTube's chagrin, it looks like this:
Er, hold up a second. Safari supports iframes and HTML5 video…so why doesn't their video render? Could it be due to my iPhone being a first generation and only running iPhone OS 3.1.1. Just to be sure I tested on the GDN Labs page as well:
It could also be that WebM only thing I mentioned, but I did some digging on the YouTube developer forums and it seems I'm not the only person seeing this. Apparently, the YouTube Player doesn't support the iPs or they didn't code a fallback to Quicktime, like I did on my HTML/Flash/Quicktime test (on the broken yet functional GDN Labs page). YouTube has admitted on those forums that they're working to extend it to mobile platforms, so they know it doesn't work, tsk tsk. It also won't work for you in some other instances, say if you're using XHTML (iframes are deprecated) or if you're trying to view the videos in Google Reader.
Hey Left Hand, meet the Right Hand and find out what it's doing!
Finally, one more piece of interesting info before I give you some YouTube HTML 5 info. A very clever person in the YouTube developer forums found that you can use this iframe with a playlist:
Well done sir! Alright, as I'm writing this on a Saturday, after having been out in the clubs until 6am, I need to go make a hangover remover (really I just need an aspirin). Here's that YouTube HTML 5 info
The YouTube HTML 5 Beta
YouTube support browsers that support both the video tag in HTML5 and either the h.264 video codec or the WebM format (with VP8 codec). These include:
- Firefox (WebM enabled version available here)
- Google Chrome (h.264 supported now, WebM enabled version available via Early Release Channel)
- Opera (WebM enabled version available here)
- Microsoft Internet Explorer 9 (h.264, Platform Preview 3)
- Apple Safari (h.264, version 4+)
- Microsoft Internet Explorer with Google Chrome Frame installed (Get Google Chrome Frame)
- Videos with ads are not supported (they will play in the Flash player)
- On Firefox and Opera, only videos with WebM transcodes will play in HTML5
- If you've opted in to other testtube experiments, you may not get the HTML5 player (Feather is supported, though)
Don't Miss Any Stories!
Get daily online video news, tips and trends via email!