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

YouTube Adds HTML5 Iframe Embed Code, Doesnt 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:

<iframe class="youtube-player" type="text/html" width="640″ height="385″ src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0″>
</iframe>

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:

YouTube Adds HTML5 Iframe Embed Code, Doesnt Work On IPhone

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:

YouTube Adds HTML5 Iframe Embed Code, Doesnt Work On IPhone

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:

YouTube Adds HTML5 Iframe Embed Code, Doesnt Work On IPhone

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:

YouTube Adds HTML5 Iframe Embed Code, Doesnt Work On IPhone

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="http://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:

  • 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)

Additional Restrictions

  • 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!

About the Author -
Christophor Rick is a freelance writer specializing in technology, new media, video games, IPTV, online video advertising and consumer electronics. His past work has included press releases, copy-writing, travel writing and journalism. He also writes novel-length and short fiction as part of Three-Faced Media . View All Posts By -

What do you think? ▼
  • Sion

    Just wakked up a video on my HTML5 Site. TrustedOffice.co.uk

  • http://www.jessebandersen.com Jesse B Andersen

    I can see use for the iframe. Some devices have Flash, and some don't. The iframe just directs to whatever the device needs. It makes sense to have the new embed iframe code since in even further days HTML 5 will be replaced by something else. This is handy for anyone that embeds youtube videos on their pages. I know I'm going to be pissed when I have to change all of my embeds on hundreds, if not thousands of pages with the existing Flash. The iframe solves that problem for the Flash vs HTML 5 conflict and it will solve future issues.

    This will all work as long as the browsers support the iframe tag.

  • YuriKolovsky

    @Jesse B Andersen the iframe tag isn't going anywhere http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

↑ Top