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

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

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

In this article we’ll add alternate content to the code that was modified in the first two articles. The purpose of providing alternate content is to allow for accessibility and/or for visitors whose browser is not configured to display a movie.

What is Alternate Content?

Alternate content is simply text or other content (for instance, an image) provided as an alternate representation of the object embedded within the page.

  1. It is placed between the <object> </object> tag set, after any <param> elements and before the </object> tag.
  2. There is no tag set or attribute label related to this content, it is placed directing into the <object> tag set just like placing content in a <p> tag set!
  3. The alternate content is what will be displayed in the browser when your visitor does not have the capability to view the object being called by the <object> element.

You can use an image, add a link, even use other elements in the alternate content… anything that is valid under (X)HTML coding guidelines. It’s actually a nice touch to use all of the above – an image, a link and text – for maximum accessibility.

Why Use Alternate Content?

This question is best answered by a demonstration. Below is an example of an <object> calling the YouTube movie from the exercise without any alternate content supplied. If you were to look at it in a legacy browser that can’t load the <object>, here’s how the movie will appear to you:

Ummmm…. what movie? EXACTLY THE POINT. Unless your browser puts in a placeholder, you don’t see anything at all between the paragraph above and this paragraph! (This is not a trick; do a view source, the code is there.)

Not very visitor friendly, is it?

Taking it one step further, imagine how a text reader would reference this movie… it wouldn’t, or at least not in a way that had any meaning for the user.

Now let’s look at the same scenario, except this time the <object> includes the use of alternate content:

image of two men standing in white room

Oops! You need the Flash Plugin to see this movie.
Please visit the Adobe site to get the plugin as a free download.

[Ed. Note:  You must either be using the "grown-up" browser, known as Opera, or if you are using IE you will have to temporarily disable the shockwave add-ons to see the alternate content above. Firefox users are basically out of luck and must assume that since Opera handles it properly Firefox will also handle it properly in the absence of the Flash/Shockwave plugin. Have I mentioned lately how much I personally despise Firefox?]

In this case the alternate content supplied contains both an image, a link and descriptive text. Much more user-friendly, isn’t it?! And it adds accessibility for a visitor using a text reader by providing meaningful text as a replacement.

Adding Alternate Content

Like I said, it’s very easy to add alternate content to the already valid code we created in the first two articles of this series. Let’s look at the code that was used in the second example above:

<div class=”movie”>
	<object type="application/x-shockwave-flash" width="425" height="373”
	data="http://www.youtube.com/v/xxxx&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1">
	   <param name="movie" value="http://www.youtube.com/v/xxxx&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" />
	   <param name="wmode" value="transparent" />
		<p class=”center”>
		<img src="images/movie.jpg" title="Opening scene from Mac vs. PC Vista Security Ad" alt="image of two men standing in white room" /></p>
		<p>Oops! You need the Flash Plugin to see this movie.<br />
		Please visit the <a title="You must install the Flash Plugin for your
		Browser in order to view this movie”
		href="http://www.macromedia.com/shockwave/download/alternates/">
		Adobe site</a> to get the plugin as a free download.</p>
	</object>
	</div>

In this example the alternate content includes not just a text description but also a replacement image as well as advice on how to get the appropriate plugin. In addition, I’ve enclosed my alternate content in formatted <p> tag sets so that it will display nicely on the web page for visual purposes.

Testing the Display of Your Alternate Content

It’s easy to test whether your alternate content is working the way you want it to work! Simply change the <object> data attribute – instead of pointing to the YouTube movie above, simply change the data value to “movienothere.swf” and preview the page in your browser: 

data="http://www.youtube.com/v/####&amp; ...

becomes…

data="movienothere.swf”

Unless you actually have “movienothere.swf” in the same directory as your web page file, you’ll see the alt content in place of the movie. “-)

And that’s all there is to embedding a YouTube movie using valid (X)HTML code, taking advantage of the customization options available and providing some basic accessibility!

Don’t you feel smart now?!

Leave a Reply