[HTML] Make YouTube embed code XHTML valid without Javascript

When you embed a video on to your website from YouTube you will find that your site will no longer successfully validate on the W3C validator.

This is because the embed tag is not supported, although it works on most browsers.

The code you get from YouTube is something similar to this:

<?php<object width="425" height="344">
<
param name="movie" value="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1"></param>
<
param name="allowFullScreen" value="true"></param>
<
embed src="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</
object>?>

Note that line #4 is the embed code that isn’t supported.

To make the code valid and work in most browsers (tested in IE6+, FF3, Chrome + Safari, Opera).

<?php<!--[if !IE]> <--> 
<
object type="application/x-shockwave-flash" width="350" height="284" data="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1"
<!--> <![endif]--> 
<!--[if 
IE]>
<
object type="application/x-shockwave-flash" width="350" height="284" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<![endif]--> 
<
param name="movie" value="http://www.youtube.com/v/jJpx9MEi6_M&hl=en&fs=1" />  
<
p>Your browser is not able to display this multimedia content.</p
</
object>?>

With the use of condition formatting we are able to set out the code to work in most (if not all) browsers.

Comments

Hey James,

You definitely found the best solution, in my opinion. :D

I run a video blog, and was a little shocked to find out one day that my site didn't validate. Rather than hack my code any time I wanted to post a new video, my friend and I decided to build a tool that converts embed code automagically.

It's called Validifier, and you can check it out here:
http://validifier.com/

Hope that saves some time. We just released it to the public a few days ago, so we'd love to hear your thoughts. :D

Looks pretty good and output is nice and clean.

Hi, i tried the code for embeding using object and i'm getting a validation error for param. Is this normal? Thanks,

@Javier, No, make sure you have the syntax correct and close it properly.

no is not..try to validate here:
http://validator.w3.org/#validate_by_input
..is not working anymore..

@Greeny, Yes it does. The validator fails because you need to have all the code including etc.

Oh yes it`s OK sorry..Thank you.
A happy new year to you!