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.

As you make your selections the embedding code will be modified; when you are done making your selections, simply simply click on the input box containing the customized code; it will all be selected (signified by a colored background with white text).

Here is the modified code from the selections in the above examples:

   <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/####&rel=0&color1=0x5d1719&color2=0xcd311b&border=1">
   <param name="movie" value="http://www.youtube.com/v/####&rel=0&color1=0x5d1719&color2=0xcd311b&border=1" />
   <param name="wmode" value="transparent" />
   </object>

Using the instructions in Part 1 of this Series, after converting it to valid XHTML it will look like this:

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

And that’s all there is to customizing your embedded movie… if  you are happy with the choices YouTube offers!

Want more? No problem! Once you have the basic code for customizing the YouTube player, you can use these tips and tricks to make it that much more “yours”:

Turning the Border On/Off

If you want to turn the border off, set it to “0″…

&border=0

In default geek speak, 1 is on and 0 is off. “-)

“On” (border=1) is the default, so if you don’t use the border declaration at all it assumes “On”. To turn it off you have to set it as “Off” (border=0).

A Final Word on To Border or Not To Border!

If you choose to turn off the border, the movie appears with only the control bar across the bottom. Depending on the movie and the background color of your page, you movie may blend in a little too much:

Changing the Player Colors

You aren’t limited to the colors offered by YouTube; you can use any color(s) you want as long as you make the substitution properly in the customized <object> and <param> strings!

Let’s look at the color declaration:

&color1=0x5d1719

For our purposes, that breaks down to:

&color#=0x######

There are two colors you can set in place of the first # in the example above — numbered 1 and 2:

• color1 is the border color, by strict definition
• color2 is not the border color “-)

The color selection — represented by ###### in the color declaration example above — is simply the desired Hex Color Code (000000 is black, ffffff is white, etc.); you must leave the ‘0x’ in place because that tells the player the next 6 characters are a hex code. Do not add a # to the beginning of the number (i.e., 0x#000000).

Here’s how that all plays out with borders on/off and colors declared or not declared:

border = 0, color1 = n/a, color2 = n/a

border = 0, color1 = red, color2 = n/a

border = 0, color1 = n/a, color2 = yellow

border = 0, color1 = red, color2 = yellow

border = 1, color1 = n/a, color2 = n/a

border = 1, color1 = red, color2 = n/a

border = 1, color1 = n/a, color2 = yellow

border = 1, color1 = red, color2 = yellow

Turning the Related Movie Menu Features On/Off

The “rel=#” section of the URL controls the related movies menu function and features.

When it is turned on (rel=1, default state) it activates 2 functions:

1. [FireFox and Opera only] When the cursor is rolled over the movie while it is playing, a sliding menu of related movies is displayed;
2. After the movie is done playing, the player displays:
   1. “Play Again” button
   2. the link to the movie on YouTube
   3. the embed code for the movie on YouTube
   4. a sliding menu of related movies (they play in player embedded on your site)

When it is set to off (rel=0):

1. Moving the cursor over the movie while it plays has no effect in any browser
2. After the movie is done playing, the player displays:
   1. the “Play Again” button

Turning on Autoplay

If for some reason you want the movie to play as soon as the page finishes loading, adding this to the end of the URL:

&autoplay=1

Be very selective with using this feature! Not only is it annoying, it can be a veritable cacaphony of sound if you use this parameter for a page containing a lot of movies.

Looping a Movie

If you really want to irritate your visitors by playing the movie ad naseum, add this to the end of the URL:

&loop=1

For maximum irritation effect use the autoplay and loop features together! “-)

Changing the size of the Movie & Player

This is easy-peasy! Simply change the height/width that YouTube supplied as the default size. Here are some tips to keep in mind when making this change:

1. Keep the numbers proportional! Otherwise the movie will look skewed.
2. If you make it too big, there may be some problems with resolution of the movie.

It’s acceptable to resize a movie in this manner to fit the area where you are inserting it; it’s not like resizing an image via XHTML code (which is a “best practice” no-no) as the movie is being rendered by a different process, so you’re not breaking any rules or best practice guidelines.

YouTube Custom Player Option

Not enough fun and games above? Consider a full-blown, custom player!

http://www.youtube.com/blog?entry=4VA_JhsF97U

This lets you embed a playlist, add your own title, select from themes and layouts, and much more. It requires registering for a free YouTube account.

In the third and final installment of this series, we’ll look at adding alternate content for accessibility and for visitors who cannot see the movie because they have that feature turned off or do not have the Flash Player plugin installed. Coming soon to a pegboard near you!