[HTML] Make YouTube embed code XHTML valid without Javascript

Posted on Thu, 2008-10-09 21:49

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

Nick Pettit

Wed, 2008-10-15 17:13

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

admin

Wed, 2008-10-15 18:27

Looks pretty good and output is nice and clean.

Javier Espino

Mon, 2009-09-14 21:14

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

admin

Tue, 2009-09-15 11:23

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

Greeny

Fri, 2009-12-11 18:06

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

admin

Fri, 2009-12-11 18:50

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

Greeny

Wed, 2009-12-30 15:38

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