If you enjoyed this site, please consider donating $3. Any amount is appreciated. Thanks!
∑ Back to DHTML Tutorial.

How To Embed Video With Valid Html

Xah Lee, 2009-01-16

Suppose you have a youtube video you want to embed in your html page. Suppose the url is this http://www.youtube.com/watch?v=J_DV9b0x7v4. If you just copy and paste their link widget, you get this:

<object width="425" height="344">
  <param name="movie"
    value="http://www.youtube.com/v/J_DV9b0x7v4&hl=en&fs=1">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/J_DV9b0x7v4&hl=en&fs=1"
    type="application/x-shockwave-flash"
    allowscriptaccess="always"
    allowfullscreen="true"
    width="425" height="344">
  </embed>
</object>

If you pass it thru w3c's html validator, the errors light up like a neon city.

Here's a valid html markup for youtube video:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>video test</title>
</head>
<body>

<div>
  <object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/J_DV9b0x7v4"
    width="425"
    height="355">
    <param name="movie" value="http://www.youtube.com/v/J_DV9b0x7v4">
  </object>
</div>

</body>
</html>

In html 4, there is no “embed” tag. Instead, there's “object” tag, which is supposed to let you embed arbitrary items, such as video, audio, or java applets.

With the “object” tag, the value for “data” attribute should be a url of your object. The “type” attribute should be the internet media type format.

The object tag can have 0 or more of “param” tags, each param tag specifies a argument. In the above example, we don't really need it. As of 2009-01, Firefox, Safari, Opera, all will display the embeded video. However, Internet Explorer 7 won't. The “param” tag above is a fix for IE.

Here's another example.

Suppose you want to embed the video http://www.redtube.com/7291 of a porn website. If you click on their widget, it gives you this markup:

<object height="315" width="434">
<param name="movie" value="http://embed.redtube.com/player/">
<param name="FlashVars" value="id=7291&style=redtube">
<embed src="http://embed.redtube.com/player/?id=7291&style=redtube"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
height="315" width="434">
</object>

The above is not valid. The following is a valid equivalent:

<object type="application/x-shockwave-flash"
data="http://embed.redtube.com/player/?id=7291&amp;style=redtube" width="434" height="315">
<param name="FlashVars" value="id=7291&amp;style=redtube">
<param name="movie" value="http://embed.redtube.com/player/?id=7291&amp;style=redtube">
</object>

In this case, we used 2 “param” tags. The one with the “FlashVars” is necessary, else redtube won't load the video. The one with the “movie” is again just for IE.

Here's another example. This is a video from http://www.dailymotion.com/video/xz3am_white-rabbit-jefferson-airplane-liv_music.

Their widget gives you this code:

<div>
<object width="420" height="339">
<param name="movie" value="http://www.dailymotion.com/swf/xz3am" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed src="http://www.dailymotion.com/swf/xz3am"
 type="application/x-shockwave-flash"
 width="420" height="339"
 allowFullScreen="true" allowScriptAccess="always">
</embed>
</object>
</div>

The code is not valid xhtml, of course. Below is a valid html version:

<div class="obj">
<object
 type="application/x-shockwave-flash"
 data="http://www.dailymotion.com/swf/xz3am"
 width="420" height="339">
<param name="movie" value="http://www.dailymotion.com/swf/xz3am">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
</object>
</div>

http://www.w3.org/TR/html401/struct/objects.html

∑ Back to DHTML Tutorial.
2009-01
© 2009 by Xah Lee.