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>
About these ads

14 Responses to Converting Vimeo embedded HTML to XHTML

  1. Christian says:

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

  2. kkrugler says:

    Hi Christian,

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

    – Ken

  3. jd says:

    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:

    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:

    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:

    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:

    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:

    Thanks! It really works and validates XHTML!

  9. Ross T says:

    Thanks for this, works perfect, excellent solution.

  10. Mario says:

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

    • kkrugler says:

      @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. [...] Or use the generator found here. Details for XHTML valid Vimeo code is here. [...]

  12. [...] Sage code swarm from Alex Ghitza on Vimeo PS: Vimeo for XHTML. [...]

  13. Just what I was looking for! Thank you so much for this. You’ve made my day. I was surprised to find that IE9 doesn’t support the new Vimeo embed code, so had to use the old one and then of course it didn’t validate. Now it does. Phew.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: