Converting Vimeo embedded HTML to XHTML

June 14, 2008

I recently used Vimeo to publish a video, and it worked well. But I ran into a problem with using the HTML they generate for embedding the video – it’s not valid XHTML.

You typically get something that starts with this <object> element (using a real value for XXXX, of course):

<object width="265" height="200">
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=XXXX&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" />
  <embed src="http://www.vimeo.com/moogaloop.swf?clip_id=XXXX&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1"
    type="application/x-shockwave-flash"
    allowfullscreen="true"
    allowscriptaccess="always"
    width="265" height="200">
  </embed>
</object>

The first problem is that strict XHTML doesn’t let you put this directly into a <body> element – you need to wrap it with <p> … </p> tags.

The second problem is that <embed> isn’t a valid XHTML element. Luckily Bernie Zimmermann had a blog post about a similar issue with YouTube videos, so I could apply similar munging.

  1. Move the type=”yyy” attribute from the <embed> element to the outer <object> element.
  2. Move the src=”yyy” attribute from the <embed> element to the outer <object> element, and change it to be data=”yyy”.
  3. Delete the <embed> element

This leaves you with something that looks like:

<p>
<object width="265" height="200"
    data="http://www.vimeo.com/moogaloop.swf?clip_id=XXXX&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1"
    type="application/x-shockwave-flash">
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=XXXX&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" />
</object>
</p>
Advertisements