Build II & III and XHTML/CSS Classes @ LVS Online
LVS Online ~ Where Learning is Fun!

YouTube Movies and Valid (X)HTML – Part 1 of 3

June 4th, 2008 Becky Peters Posted in (X)HTML Tricks & Tips, Validation Tips | 3 Comments »

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. This article is a reprint of the series first published on stylehack.com.

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?

The best place is directly from YouTube, of course! However you come across the movie — whether embedded in a web page, sent to you as a link in email, via Google’s video search feature, or by simply visiting and browsing the YouTube site — you should always follow that movie to its official page on the YouTube site.

Once there, you have two options — to simply grab the embed code for the default player, or to customize the player before you grab the embedding code.

To grab the embedding code as is, simply click on the input box containing the default video code; it will all be selected (signified by a colored background with white text).

Copy the code (CTRL+C) and paste it (CTRL+V) into a blank page in your text editor so you can modify it.

Now let’s see what the code actually looks like and how it has to be modified in order to maintain W3C compliance.

Modifying the Code from YouTube

IMPORTANT:   In the examples below, the movie’s identifying number has been replaced with a series of #s to make this a generic reference. Line breaks between elements are allowed; there are no line breaks within elements, what you see here in that regard represents line wrapping!

   <object width="425" height="355">
   <param name="movie" value="http://www.youtube.com/v/####&rel=1"></param>
   <param name="wmode" value="transparent"></param>
   <embed src="http://www.youtube.com/v/####&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
   </object>

Right off the bat we see that this code includes the deprecated <embed> element. Can’t have that! So let’s look at what the <embed> contains that we need (green) for the <object> and what we can safely toss out:

    <embed src="http://www.youtube.com/v/####&rel=1"
        type="application/x-shockwave-flash"  wmode="transparent"
        width="425" height="355"></embed>

Now let’s move those attributes we are keeping for use into the <object> element:

   <object type="application/x-shockwave-flash" width="425" height="355"
        data="http://www.youtube.com/v/####&amp;rel=1">

IMPORTANT:  Notice that “src” becomes “data”. Also, ALL & (ampersands) in the URL must be replaced with “&amp;” (no quotes) or the code will not validate!

Next we’ll examine the <param> elements in the original code:

   <param name="movie" value="http://www.youtube.com/v/####&rel=1">
        </param>
   <param name="wmode" value="transparent"></param>

In this case we’ll keep all of it but we need to convert it to the correct format for (X)HTML purposes:

   <param name="movie" value="http://www.youtube.com/v/####&amp;rel=1" />
   <param name="wmode" value="transparent" />

IMPORTANT:  Notice that <param> is self closing. Also, ALL & (ampersands) in the URL must be replaced with “&amp;” (no quotes) or the code will not validate!

When we put it all together (<object> with <param> and <embed> removed), it looks like this:

   <object type="application/x-shockwave-flash" width="425" height="355"
        data="http://www.youtube.com/v/####&amp;rel=1">
   <param name="movie" value="http://www.youtube.com/v/####&amp;rel=1" />
   <param name=”wmode” value=”transparent” />
   </object>

Voila! You’ve just learned how to embed a YouTube movie while maintaining valid (X)HTML code!

There’s more to come… we still need to learn how to customize the movie (color, player, functions) and, more importantly, how to provide alternate content for viewers who cannot see the movie for whatever reason! We’ll explore those topics in Articles 2 and 3 of this series.

Shameless Plug  To learn more about creating and maintaining valid (X)HTML code, why not check out the Build Your Website series of classes at LVS Online? I teach the intermediate class — Build Your Website II.  ”-)