Blogless

About a month ago, I wrote a post for BlogLESS about how to display video content from Vimeo with Valid XHTML using Drew McLellan’s Flash Satay technique.

Recently, it occurred to me to make this explicit: You can do the exact same thing with videos from YouTube! So, in the interest of continued blog validation, let’s take another look at what makes an embedded video invalid, and how to avoid it. We’ll start with the generics, and then move on to the slightly more finicky YouTube requirements.

Generic Embedded Video HTML

An embedded video is almost always a flash movie (swf). The standard template for embedding a SWF into an HTML document looks something like this:

<object width="###" height="###">
     <param name="movie" value="http://www.someuri.com/" />
     <param name="allowFullScreen" value="true" />
     <embed width="###" height="###" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.someuri.com/"/>
</object>

You’ll notice that this is very, very similar to what both YouTube and Vimeo deliver you in the “embed” snippet for a given video. You’ll also notice a total of three HTML tag types at play in this code snippet: an object tag, which contains two param tags and an embed.

One of these things is not like the others…

Of these three, object and param are valid HTML, and embed is not. This means that any time you see an embed tag, you need to get rid of it. Luckily, this is quite easy to do, as all the attributes of the embed tag are supported by the object tag as well! Nice!

Mix it up, mix it around

You’ll notice in the example above (taken from a YouTube embed HTML block) that all of the attributes in the embed tag are included elsewhere, with the single exception of the type attribute (note that for Vimeo, even that one’s redundant). This is the first of a maximum of two attributes you will have to move (we’ll see the second one momentarily) from the embed to the object tag, before you delete the embed tag altogether. For our example, this gives us:

<object width="###" height="###" type="application/x-shockwave-flash" >
     <param name="movie" value="http://www.someuri.com/" />
     <param name="allowFullScreen" value="true" />
</object>

To recap:

1. Any embed tag you post on your blog will cause a validation error.
2. Most video sharing sites deliver embedded videos with HTML that uses the embed tag.
3. The embed tag is totally redundant. You can normally just delete it.
4. But before you do, make sure all of the attributes it employs are defined in either your object or param tags.

The YouTube Requirement

Despite the fact that the above code is valid, it won’t play a video from YouTube. How irritating! What’s going on? Well, YouTube requires use of the the data attribute for the object tag, where Vimeo doesn’t. The data attribute takes a URI as its value. Employing this, here’s our updated code:

<object width="###" height="###" type="application/x-shockwave-flash" data="http://www.someuri.com/" >
     <param name="movie" value="http://www.someuri.com/" />
     <param name="allowFullScreen" value="true" />
</object>

Happy validating!