Stylehack

This is the second in a series of 3 articles designed to help you embed a YouTube movie while maintaining (X)HTML standards compliance, then customizing the display of the movie and finally, providing alternate content for visitors unable to view the movie.

In this article we’ll apply all that you learned in the first article to embed a movie, this time with code that has been modified using the customization option(s) available on YouTube.

Customization Options via YouTube

If you recall from the first article in this series, when you are on the movie’s YouTube page you have two options for obtaining embedding code — to simply grab the embedding code for the default player (addressed in Part 1 of this series), or to customize the player before you grab the embedding code. Let’s grab some customized code and convert it to valid XHTML code.

To generate the customized code click on the “customize” link, located right above the default embedding code.

Then select from the options you would like to customize; YouTube offers you a choice of colors, using a border and/or enabling a selection of related movies to be displayed when your embedded movie has finished playing.

This is the first of a series of 3 articles designed to help you embed a YouTube movie while maintaining (X)HTML standards compliance, then customizing the display of the movie and finally, providing alternate content for visitors unable to view the movie.

Web 2.0 is in full swing (cough cough) and with it come many opportunities to display someone else’s content in our sites or blogs. And most of those opportunies even offer us the code necessary to do so. However, as is typical with much that you find on the web, the code provided by the object’s author is rarely 100% (X)HTML standards compliant.

Most of the code you find out on the web uses the <embed> element, which is deprecated in (X)HTML. So we need to be able to replace that element and its attributes with the appropriate <object> and <param> elements.

How is that accomplished? The short answer is by moving some (or all) of the <embed> attributes to the <object> and <param> elements! Let’s see how that works by concentrating on how to make the code to embed a YouTube movie standards compliant.

Getting the Code to Insert a YouTube Movie

The code for embedding a movie is different from the code used on YouTube pages and from the code that you receive in email when someone uses the “Email this movie” functon. So where do you get the code sample you need to embed a YouTube movie?

Ever inserted a snippet of JS you snagged somewhere online? Or have a script you’ve been using for years but now you find it prevents your code from being valid per W3C standards?

It’s actually really easy to fix the problem; it’s probably harder to determine what the problem is first!

I wrote an article on just this topic for a class blog related to the XHTML/CSS class I teach at LVS Online:

http://lvsonline.com/online-xhtml-css-classes/?p=13

Get on over there and get the scoop on how to validate your pages when you are including JS! “-)