Converting Vimeo embedded HTML to XHTML

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>

This entry was posted on Saturday, June 14th, 2008 at 11:00 am and is filed under random. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

12 Responses to “Converting Vimeo embedded HTML to XHTML”

  1. Christian Says:
    July 27, 2008 at 2:09 pm | Reply

    Good job, but there is a not needed and invalid /embed in your code

  2. kkrugler Says:
    July 27, 2008 at 3:32 pm | Reply

    Hi Christian,

    Good catch – I’ve edited the post to remove the vestigial tag…

    – Ken

  3. jd Says:
    August 21, 2008 at 2:49 am | Reply

    hi, when i try the xhtml code it works but in IE7 gives an ‘error on page’ warning

    Line: 1
    Char: 141
    Error: ‘null’ is null or not an object
    Code: 0

  4. kkrugler Says:
    August 22, 2008 at 8:35 am | Reply

    Hi jd,

    The error you mention is a JavaScript error message. Since my snippet above doesn’t have any JavaScript in it, this makes me think that your page has an error that’s perhaps being exposed by the inclusion of the snippet.

    – Ken

  5. jd Says:
    August 26, 2008 at 6:06 am | Reply

    hi, yeah i was using some javacript to provide rounded corners to a div.
    removed the ‘allowscriptaccess’ line from your code and it seems to work ok!

  6. Andrew Johns Says:
    December 10, 2008 at 9:40 am | Reply

    I’d thought that it would be more semantically correct to put the inside of a rather than a . Both are block tags which is why it’s not breaking validation, but to me should always be used for text data, rather than images or other objects such as video?

    That’s how I do things, anyway. :)

  7. Andrew Johns Says:
    December 11, 2008 at 3:22 pm | Reply

    I just noticed, that the html I used didn’t get included. I meant <div> tags instead of <p> tags.

    Hopefully that comes out this time,

  8. Víctor B. Says:
    December 31, 2008 at 7:15 am | Reply

    Thanks! It really works and validates XHTML!

  9. Ross T Says:
    July 11, 2009 at 5:37 am | Reply

    Thanks for this, works perfect, excellent solution.

  10. Mario Says:
    July 26, 2009 at 9:05 am | Reply

    Hi, how can I use a vimeo video in a html 4.01 strict?

    • kkrugler Says:
      July 31, 2009 at 6:53 am | Reply

      @Mario – I haven’t tried this, but I believe you can change the three elements to be stand-alone tags – e.g. <param xxx>, versus the current <param xxx />

  11. YouTube and Vimeo embed code will not validate « OneBigMug Says:
    February 16, 2010 at 8:45 am | Reply

    [...] Or use the generator found here. Details for XHTML valid Vimeo code is here. [...]

Leave a Reply