YouTube Adds HTML5 Iframe Embed Code, Doesn’t Work On IPhone

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:

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:

src=”https://www.youtube.com/embed/p/PLAYLIST_ID“

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

Supported Browsers

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: