TTANCM.COM » Embedding YouTube Videos as Valid XHTML 1.0

Just found a great link with an explanation of how to embed youtube videos as valid xhtml so you don’t have to make your site non-compliant just to embed some videos.

The original post was here:
http://www.bernzilla.com/item.php?id=681

But I prefer the code by minghong in the comments because I don’t need to use inline CSS for it.

This is what the code should look like (no deprecated embed tags like Youtube’s default code).

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

Just replace the data=XXXX and value=XXXX with the url of the youtube video, which you can get from the YouTube embed code and looks something like http://www.youtube.com/v/7_6B6vwE83U

Also, if you use Lightbox JS (a nice fancy script I use on this page which makes the images pop up in their own little window and darkens the page in the background) adding

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

Somewhere in the youtube code so you end up with something like

<object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/7_6B6vwE83U"><param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" /><param name="wmode" value="transparent" /></object>

Will make it so that the videos do not end up in front of the pop up images like the older posts on this site.

Examples after the jump

Here’s some examples. Top video embed doesn’t have the <param name="wmode" value="transparent" />, bottom video embed does. Try clicking on the image between the two videos below to expand it. Go ahead, try it now.

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

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

See how the top video embed ends up displaying in front of the image, but the bottom video is behind like it should be? Irritating isn’t? Not much point in having an image there if you can’t see it huh?

You can scroll down so that only the bottom video is on screen and click the image below it to see how it should work for just the video with <param name="wmode" value="transparent" />.

Why doesn’t youtube include this in their default embed code or make the default embed code valid, up to date XHTML? I don’t know…

Why don’t you ask them: http://www.youtube.com/contact