How to Embed Video with Valid HTML

By Xah Lee. Date: . Last updated: .

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

Here is 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 is “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 is 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 is 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 is 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 is 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 is another example. This is a video from http://www.break.com/usercontent/2008/10/Britney-Spears-Womanizer-Uncensored-592196.html (2010-07-19)

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 is nothing you can do about that if the code is bad.

BUY ΣJS JavaScript in Depth