∑ Math 〖Curves ◆ Surfaces ◆ Wallpaper Groups ◆ Gallery ◆ Software ◆ POV-Ray〗
Programing 〖Linux ◆ Perl Python ◆ HTML ◆ CSS ◆ JavaScript ◆ PHP ◆ Java ◆ Emacs ◆ ⌨ ◆ Unicode ♥〗
Web Hosting by 1＆1

How to Embed Video with Valid HTML

Xah Lee, ,

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.

tudou.com Example

Incorrect

<embed src="http://www.tudou.com/v/9OoINUl31dQ/v.swf"
 type="application/x-shockwave-flash"
 allowscriptaccess="always"
 allowfullscreen="true"
 wmode="opaque"
 width="480"
 height="400"></embed>

Correct

<object
 type="application/x-shockwave-flash"
 data="http://www.tudou.com/v/9OoINUl31dQ/v.swf"
 width="480"
 height="400">
 <param name="movie" value="http://www.tudou.com/v/9OoINUl31dQ/v.swf">
</object>

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

Incorrect

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

Correct

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

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>
blog comments powered by Disqus