Hi! I'm Nathan Hoad


How to: Valid XHTML and RSS with Youtube

When I was building this blog I came across an interesting problem. I wanted to include some of my video projects as Youtube clips but noticed that the default embed code that Youtube offers isn't valid XHTML.

Youtube offers something like this:

<object width="425" height="350">
  <param name="movie" 
  value="http://www.youtube.com/v/iJ6JjzfZ2PM"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="http://www.youtube.com/v/iJ6JjzfZ2PM"
    type="application/x-shockwave-flash"
    wmode="transparent"
    width="425"
    height="350"></embed>
</object>

After a bit of playing around, I found that what I really needed was something more like this:

<object data="http://www.youtube.com/v/iJ6JjzfZ2PM" 
  type="application/x-shockwave-flash" 
  width="425" height="350">
  <param name="movie" value="http://www.youtube.com/v/iJ6JjzfZ2PM"/>
</object>

The next hurdle was RSS; Valid RSS doesn't allow <embed> tags at all. I removed them from the output of my RSS generator but I still wanted to show some sort of preview of the missing Youtube embed. Thankfully, Youtube offers a default preview image for all uploaded videos and so given iJ6JjzfZ2PM as an example video id, the image would be: http://img.youtube.com/vi/iJ6JjzfZ2PM/default.jpg

That image comes out something like this:

Preview image

So with all that sorted, now I can have my Youtube and my validation .

If I just made your day a little better then thank me with a coffee or maybe a a pizza