Using iframe to Embed Youtube Videos

Perm url with updates: http://xahlee.org/js/youtube_iframe_embed_video_code.html

Using iframe to Embed Youtube Videos

Xah Lee, 2010-11-19

In 2010-07, Google introduced a new html format for embedding youtube videos.

This is the original:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/h7XjOK_DSmo?fs=1&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/h7XjOK_DSmo?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

The following is manually crafted code using valid html with “object” tag:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/h7XjOK_DSmo" width="480" height="385"><param name="movie" value="http://www.youtube.com/v/h7XjOK_DSmo"></object>

The following is the new iframe format they are offering:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/h7XjOK_DSmo?rel=0"></iframe>

Here's how it looks in browser:

The new format using iframe is much better, because, according to Google's youtube blog at Source:

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. [...]

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.

The iframe is also better because:

  • The actual video html code is fetched dynamically, so you don't have to worry about keeping up-to-date of all your embedded video codes on your site, in case any youtube format changes or feature changes in the future.
  • You don't have to worry about browser compatibility of your embeded video code now. Google takes care of that.
  • The iframe tag is shorter and simpler.
  • If you are a html validity worrywart like me, with iframe you have less to worry about. Technically, there's no 「type="text/html"」 attribute for “iframe” tag, so Google's new html is still incorrect, but it's far better than the extremely complex “embed” tag, or manually crafting and maintaining the not-widely-supported “object” tag.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs