Validating Video Code

Since I’m quite vehement about valid coding, I’ve decided to share a little something with you. Thanks very much to Drew McLellan’s article, I have managed to put valid coding for videos on my website.

So who’s tried to put a YouTube video, or any video, on their site, and found the coding to be totally invalid?

Yes, a few of us have been there. The <embed>, unfortunately, is not listed in any HTML specification – therefore, it is invalid.

What I will go through here, is essentially a deconstruction of McLellan’s article – and I’m writing it just for the beginners – leaving out all the unnecessary background information and just going through the process. I am also writing it so that you won’t need to edit the video as he has mentioned.

In leaving out the editing though – it accounts for minor problems. Minor problems such as the video not loading because of lack of cross-browser compatibility. In which case you can have a download link, or a link to an un-validated page. There are ways!

There is no way I will be explaining as well as McLellan, but I will explain it in layman’s terms.

Taking a look

I’ll be using one of my own videos as an example. The link to the video is here. (It’s just a video of me snapping a pen, don’t worry.)

This is the code that YouTube gives me:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1"> </param>
<param name="allowFullScreen" value="true"> </param>
<param name="allowscriptaccess" value="always"> </param>
<embed src="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed>
</object>

Pretty horrid, right?

Well, noticeably, the code looks right. However, as I mentioned earlier, <embed> is an HTML specification that doesn’t exist. So we have to remove that part.

Dissecting

The only thing we’ll need from that embed tag is the URL. So copy that, and remove the rest of the embed tag:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1"> </param>
<param name="allowFullScreen" value="true"> </param>
<param name="allowscriptaccess" value="always"> </param>
</object>

It’s gone! Woo!

You’ll notice that quite a few of the attributes in the embed tag are also in the object tag. Eg. the width and height.

Adding

You might notice that we took out the type attribute in the embed tag. We now have to put that in the object tag, along with the video URL.

However, the video URL needs to put in as a data attribute. The following is what you should have. The text in bold is the information we have just added.

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1"> </param>
<param name="allowFullScreen" value="true"> </param>
<param name="allowscriptaccess" value="always"> </param>
</object>

Final tweaking

Unfortunately, <param> doesn’t need to be ended with </param>. It is not like <p> (a paragraph) that needs to be ended.

Therefore, all the </param>s can go:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always"> 
</object>

And if you’re in HTML 4.01 Transitional or Strict, this will be fine and you’re good to go.

For XHTML users

But, if you’re in XHTML there is just that last thing you need to do – add the trailing backslashes to the param tags.

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" /> 
</object>

I guarantee you that’s validated, transitional or strict. Take a look for yourself.

VERY IMPORTANT: The Ampersand

The ampersand – & – is an annoying symbol. When you type it in X/HTML coding on its own, it comes out invalid.

You must type &amp; for the ampersand to appear. So in the case of my video URL, there are two ampersands.

Therefore, whenever an ampersand appears in my coding, I must write &amp; instead. If I don’t, I’ll get invalid coding.

Even if the ampersand is part of a URL, you must replace the ampersand with &amp;. With HTML, the browser translates &amp; to & so the Web server would only see & in the query.

Therefore you only do this when coding in X/HTML. Don’t do it in emails or for real in the address bar!

Summing up: Replace all ampersands (&) with the code &amp;.

Optional

Of course, some people might not have Flash Player or any program to watch your video. In this case, you can use an image to let them know.

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/rFvJ_UDnhVk&hl=en&fs=1"&>
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always"> 
<img src="noflash.gif" alt="sorry, but you don't have a flash player to view this video.">
</object>

If you’re in XHTML, don’t forget your backslashes on the param and image tags.

You’ll have to make the image yourself, of course.

Does it really work?

Of course it does. Here is the video, and if you must check, my coding is valid.