GaryBadger.com: Web Designs by Gary Badger, Sydney Australia.

This site gets a lot of hits via Google from people searching terms along the lines of "valid youtube xhtml". This is despite that fact that until recently I had little more than that phrase mentioned within my pages, and certainly no useful resource on the subject. That must have been terribly disappointing for visitors looking to improve on the invalid code that YouTube supplies for embedding videos into their web pages! Since getting YouTube xHTML to validate is very important to me and a standard that I uphold when developing web pages, I thought I should put together something a little more useful for people who feel the same way.

I love YouTube, and the fact that a video hosted by that site can be embedded within any other web site. MySpace is full of them, and I have embedded one into The Dusty Springfield Show site that I developed. YouTube helpfully provides the HTML code for each unique video file to facilitate this, but unfortunately the code supplied is not valid HTML and contains depreciated tags including the dreaded <embed>. The result is that this code prevents an entire web page from successfully validating to the established web standards.

Now that's not the end of the world by any means. The YouTube code still works well in web browsers despite not validating. But when a web developer strives to write the best possible code for their pages and ensure that the tough specifications can be met for clients, it can be a big disappointment when something silly like invalid YouTube code is all that stands between you and the proverbial gold star for good coding.

To try to remedy this I spent some time playing around with the YouTube code, replacing depreciated items with their more acceptable counterparts, and I was making some progress. Then I stumbled upon an excellent resource entitled Embedding YouTube Videos as Valid XHTML 1.0, by Bernie Zimmermann. Bernie had already been there and done that with great results, and then some of his visitors enhanced the idea further through their comments further down his page.

For a practical demonstration, YouTube supplied the following code for one of my favourite videos:

While this code works in web browsers, sadly it is pretty ugly. The W3C mark-up validation result shows a total of 34 errors in the code. I'll happily concede that most of these errors are trivial, but there are still some important ones in there including "there is no attribute 'wmode'" and "element 'embed' undefined". If this code was included as an object in a web page the entire page would fail validation, and if this were important to you or your clients, it would be a disappointing result.

Now to tidy this code up and be guided by Barry Zimmerman's work, slices of redundant and depreciated code can be removed to give the following:

This code is much more simple, contains less characters, and the W3C mark-up validation result is a pass as valid xHTML 1.0 'Strict'. Much nicer to see, and much nicer to present to a client! To use this code simply copy / paste the above snippet, and replace the URI (highlighted in red) with the line provided by YouTube for your video file.

The finished product remains a beautifully embedded video, in this case including a customised colour scheme and tweaked width and height attributes, re-sized to improve on the "lossy" picture quality and produce a sharper picture.

So the only thing left to ponder: Why doesn't YouTube supply correct and valid code in the first place?

Got a view or opinion on this subject? Please feel free to add your thoughts to this topic.

Please check the "Rules of Engagement" before submitting, and note:

• Comments are moderated, and only added to this page after approval;
• HTML tags are automatically stripped from comments and will not appear;
• Comments are restricted to 1500 characters (that's around 200 words for most people).

 

---

 

Thanks chief - your youtube code works well.
The height of 355 was an interesting way to try to achieve a 4:3 screen ratio. My gripe with youtube (from a technical p.o.v.) is that it doesn't understand Pixel Aspect Ratio when uploading videos.. so uploading 720x576 DVD footage is not a good idea without converting to square pixels first. But i guess it's a bit like microsoft - they get away with crap like that because they can!

But yeah, you would think that with so many frickin people using the service (and putting it on their own webpages), that they'd make that little bit more effort to supply embed code that actually validates!

Pete
Melbourne - Saturday, 03 May, 2008 at 16:40:04 (AEST Australia/NSW)

 

A visitor helpfully pointed out that there are some online tools which will automatically convert YouTube's crap code into valid xHTML.

This one works well:
http://www.tools4noobs.com/online_tools/youtube_xhtml/

So the theory is still relevant, but the process simplified.

Cheers,
Gary.

Gary
Sydney - Tuesday, 22 April, 2008 at 21:43:27 (AEST Australia/NSW)

 

Your Name:
Your Website:
Your Location:
Comments:	Maximum 1500 characters

Submissions containing any of the following will be rejected:

• Adult content, or links to any such content;
• Offensive language;
• Anything that looks or even smells like advertising;
• Comments which have potential to offend, degrade, intimidate, or incite violence or prejudicial action against a person or group of people based on their race, gender, age, ethnicity, nationality, religion, sexual orientation, gender identity, disability, language ability, moral or political views, socioeconomic class, occupation or appearance (such as height, weight, and hair colour), mental capacity and any other distinction.

Steer clear of these and we'll all remain happy!

Naturally I accept no responsibility or ownership of news or views submitted by others. If you believe that there is sensitive or damaging material within website comments please contact me and I will review / remove it.