Valid XHTML for YouTube Videos

If you ever embed YouTube videos in a Web page, you may not realize it but the embed code they provide is not valid XHTML markup. “Ah come on, why create valid markup in the first place?” you may be thinking. Let’s start with the basics…

Why Validate HTML?

For an introduction to validating your Web site, see the following resources:

• W3C’s “Why Validate?” covers the practical arguments.
• “HTML Validation: the hidden key to SEO” offers economic motives.

Convinced? Read on…

How to Validate Your Web Site

There are several ways to validate your Web site. Easiest: enter your Web site address into W3C validator service and see the results immediately.

Or if you’re a Web developer and want to do this on a regular basis, get the “Web Developer” add-on for Firefox, and you’ll find a “Validate Local HTML” option in the Tools section.

And for the Ruby on Rails programmers in the house, you can automate the validation process as part of  the test cycle using the nifty htmltest plug-in.

Fixing the Video Embed Code

Back to our original problem: YouTube video code wraps an EMBED tag inside an OBJECT tag but the former is not part of the XHTML standard. Hence, a Web page run through the validation service will fail. Getting rid of the EMBED tag requires a few changes to the OBJECT tag so that browsers like Firefox display the video properly.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/SOME_VIDEO_URL" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/SOME_VIDEO_URL"></embed></object>

The above code was tested in IE 7, Firefox 3, and Safari 3. Your mileage may vary with older browsers.

Update

Nick Pettit shared a delightful tool which solves the above headache and generates valid XHTML 1.0 Strict markup. Check out http://validifier.com.