Converting YouTube's Embed HTML code to validate as HMTL 5

I have been working on my new site Linux By Example, a bi-weekly screencast for Linux, which I have been trying to validate as HTML5 - the home page will feature the latest video from YouTube, and the standard embed code that YouTube provides, does not validate as HTML5.

Here is a list of what I needed to change to ensure the page would validate as HTML5.

Object tag needs a data parameter

The object tag now needs a data attribute, here I placed the full URL to the YouTube video. You need to make sure you escape your “&” characters within the URL. In the example below, I have also added the extra parameter hd=1, which forces the video to be watched in high definition.

The Param tag no longer needs a closing tag

The HTMl5 param tag, which allows you to specify the run-time settings for an object, no longer needs a closing tag. Instead you just need to enter a forward slash within the opening param tag, e.g :-

Before:

<param name="allowFullScreen" value="true"></param>

After:

<param name="allowFullScreen" value="true" />

The Embed tag no longer needs a closing tag

Likewise, the HTMl5 embed tag, which defines embedded content, no longer needs a closing tag. Instead you just need to enter a forward slash at the end of the opening embed tag.

Complete Example

Below is a complete example of the YouTube embed video code, which will validate under HTML5.

<object width="425" height="344" 
	data="http://www.youtube.com/v/54b9I-g5uG0&hl=en_GB&fs=1&rel=0&hd=1">
<param name="movie" 
	value="http://www.youtube.com/v/54b9I-g5uG0&hl=en_GB&fs=1&rel=0&hd=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/54b9I-g5uG0&hl=en_GB&fs=1&rel=0&hd=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344" />
</object>