The <EMBED> tag has been around since Netscape 2.0 days (circa 1995) As you may or may not know, the <EMBED> tag is amazingly not actually part of the HTML 4.0/XHTML 1.0 specification (if you want to know why, checkout John Dowdell blog post on <EMBED>’s dark history). This leaves us with a problem, if you try use the W3C validator on any page with an embedded YouTube video, you are going to get a lot of errors. How to fix this? Easy…

Step 1

You tube generates some code for you, it looks some thing like (YouTube compresses to 1 line),

  <object width="425" height="344">
     <param name="movie" value="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" />
     <param name="wmode" value="transparent" />
     <embed src="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344" />
  </object>

First thing to do is strip out the <EMBED> tag.

Step 2

Add a “data” and a “style” attribute to the <OBJECT> tag. This points to the flash file (YouTube video) and sets the size respectively. So the <OBJECT> tag will now look something like,

  <object width="425" height="344" data="http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en" style="width:425px; height:344px;" >

Step 3

Clean up the remaining <PARAM> tags. You can safely drop the following tag,

     <param name="wmode" value="transparent" />

You can optionally add “bgcolor” param if you wish,

     <param name="bgcolor" value="#FFFFFF" />

So the final result would look like this,

     <object id="charts" type"application/x-shockwave-flash" style"width:425px; height:344px;" data"http://www.youtube.com/v/3AdFA6WWJ7E">
        <param name"quality" value"high" />
        <param name="movie" value="http://www.youtube.com/v/3AdFA6WWJ7E" />
        <param name"bgcolor" value"#FFFFFF" />
      </object>

Note: If the YouTube url includes an ampersand symbol (&), make sure that you convert it to its HTML equivalent (&amp;),

i.e.
http://www.youtube.com/v/3AdFA6WWJ7E&hl=en changes to,
http://www.youtube.com/v/3AdFA6WWJ7E&amp;hl=en

Conclusion

Converting YouTube generated HTML to XHTML (Strict) compliant and can be achieved with minimal fuss while still maintaining cross platform support. This solution is not just restricted to YouTube either, it can be used on other non compliant embedded flash, like the otherwise excellent maanil.us PHP/SWF Charts. The following example is a fully XHTML complaint YouTube video, and the original non compliant code.

Tested on,

Safari 3.1.1, Mac os-x
Safari 3.0.4, Mac os-x
Safari 3.0, Windows XP
Safari 3.1.1, Windows XP
Firefox 2.0.0.4, Windows 2000
Firefox 1.5, Windows 2000
Firefox 3.0, Windows XP
Opera 9.23, Windows XP
Internet Explorer 6 (SP2), Windows XP
Internet Explorer 7, Windows XP
Internet Explorer 8, Windows XP