July 23, 2010

YouTube's New Embedding Code

Ever since YouTube started testing an HTML5 interface I wondered why YouTube's embedding code is not future proof. YouTube's code creates a Flash object and can't take advantage of the native support for videos in modern browsers. YouTube will always have to support the existing Flash player, but it's strange to see that the embedding code isn't more flexible.

YouTube API Blog announces that YouTube will switch to a new embedding code that uses an iframe. "If you use the new embed code style, your viewers will be able to view your embedded video in one of our Flash or HTML5 players, depending on their viewing environment and preferences. In instances where HTML5 isn't supported (e.g. our HTML5 player can't play videos with ads), we use Flash."

Here's an example of embed code:

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


YouTube says that "an additional benefit of the new embed style is that it will eventually allow embeds to work on mobile devices, which typically use a built-in player instead of Flash or HTML5." iPhone, Android phones and other mobile devices use a special application for YouTube, while mobile browsers use plug-ins that detect YouTube's embedding code and replace it with some code that can be handled by the built-in YouTube app. The new embedding code will allow YouTube to use the HTML5 video tag in browsers that support this feature.

In a previous post, YouTube's Kuan Yong said that "Flash Player's ability to combine application code and resources into a secure, efficient package has been instrumental in allowing YouTube videos to be embedded in other web sites. Web site owners need to ensure that embedded content is not able to access private user information on the containing page, and we need to ensure that our video player logic travels with the video (for features like captions, annotations, and advertising). While HTML5 adds sandboxing and message-passing functionality, Flash is the only mechanism most web sites allow for embedded content from other sites."

9 comments:

  1. this is actually pretty awesome.

    i personally use wordpress' oembed functionality which makes it pretty much future proof.

    http://codex.wordpress.org/Embeds

    but for millions of old embeds, youtube is pretty much struck with the flash format for ever...

    i hope more CMS solutions adopt oembed so that embed codes can be made future proof for more sites.

    ReplyDelete
  2. Just to add, in order to view the HTML5 version on the new embed code, the viewer have to be logged in to his/her Youtube account and had already joined the HTML5 beta program

    ReplyDelete
  3. I haven't checked this but won't using an iframe to embed the video mean that YouTube will lose the statistics relating to where it was embedded from?

    One of the features of an iframe was complete separation of it from the page & domain that it was embedded on.

    To my mind of thinking, wouldn't that mean that if you clicked play - it'd appear to YouTube as if you copied the video URL and pasted it directly into your browser window?

    ReplyDelete
  4. I just hope that they don't break the current embed codes.

    ReplyDelete
  5. @Alistair Lattimore

    No. The Iframe gets the url of the containing page via the referer HTTP header.

    ReplyDelete
  6. wel the old coding system is still better enough, i think they should not replace it yet.

    ReplyDelete
  7. personally dont prefer the flash format.

    ReplyDelete
  8. I'd just like to point out, for what it's worth, that this update breaks all things that rely on getting .mp4 versions of videos directly from youtube. For example getting them and storing them on my ipod to watch on the train. Now I find myself in the market for a media converter for my OS that works properly, which hasn't been smooth sailing so far.

    ReplyDelete
  9. honestly I think I'll start using Vimeo more and YouTube less until YouTube can come up with a solution that works as flawlessly as Vimeo.

    ReplyDelete

Note: Only a member of this blog may post a comment.