How to Embed Video with Valid HTML

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

This page shows you how to embed a video with valid HTML, and also practical that it display video in all current browsers. (tested browsers: IE 8, Firefox 3, Safari, Google Chrome, Opera.)

YouTube Example

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 & 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 sign.

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 diverse type of objects, such as video, audio, 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.

Google Video Example

Here's the code from their embeded widget:

Incorrect

<embed id=VideoPlayback
 src=http://video.google.com/googleplayer.swf?docid=3685846746009919856&hl=en&fs=true
style=width:400px;height:326px
allowFullScreen=true
allowScriptAccess=always
type=application/x-shockwave-flash>
</embed>

Correct

Here's a fixed code:

<div>
<object
 type="application/x-shockwave-flash"
 data="http://video.google.com/googleplayer.swf?docid=3685846746009919856&amp;fs=true"
 width="400" height="326">
<param name="movie" value="http://video.google.com/googleplayer.swf?docid=3685846746009919856&amp;fs=true">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
</object>
</div>

You must have the &fs=true and <param name="allowFullScreen" value="true"> for full screen to work.

If you take out the <param name="allowScriptAccess" value="always">, then the menu to go to the original Google video page won't work.

dailymotion.com Example

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

Incorrect

Their widget gives you this code:

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

The code is not valid XHTML.

Correct

Here's a valid HTML version:

<div>
<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>

Note that <object> tag must be inside a container such as <div> in HTML 4.01 Strict, but not in HTML 4.01 Transitional.

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

break.com Example

Here's another example. This is a video from 〔http://www.break.com/usercontent/2008/10/Britney-Spears-Womanizer-Uncensored-592196.html〕 ()

Incorrect

<object width="464" height="283"
id="592196"
type="application/x-shockwave-flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
alt="Britney Spears - Womanizer Uncensored Funny  Videos">
<param name="movie" value="http://embed.break.com/NTkyMTk2"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://embed.break.com/NTkyMTk2"
type="application/x-shockwave-flash"
allowScriptAccess=always
width="464" height="283"></embed>
</object>
<br>
<font size=1>
<a href="http://www.break.com/usercontent/2008/10/Britney-Spears-Womanizer-Uncensored-592196.html" target="_blank">
Britney Spears - Womanizer Uncensored</a>
 - Watch more <a href="http://www.break.com" target="_blank">Funny  Videos</a>
</font>

Correct

<div>
<object
 type="application/x-shockwave-flash"
 data="http://embed.break.com/NTkyMTk2"
 width="464" height="283">
<param name="movie" value="http://embed.break.com/NTkyMTk2">
<param name="allowScriptAccess" value="always">
<param name="id" value="592196">
<param name="classid=" value="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
</object>
</div>

More Examples

See: How to Embed Video with Valid HTML 2.

Note: as of today, most of these sites give code that uses “iframe” instead. With iframe, usually it's more modern code but still not necessarily W3C valid HTML. Some uses JavaScript inside iframe to deliver content, and there's nothing you can do about that if the code is bad.

blog comments powered by Disqus