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&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" />
<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=XXXX&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&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.
- Move the type=”yyy” attribute from the <embed> element to the outer <object> element.
- Move the src=”yyy” attribute from the <embed> element to the outer <object> element, and change it to be data=”yyy”.
- 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&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&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&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" />
</object>
</p>
Ken's Techno Tidbits 
Good job, but there is a not needed and invalid /embed in your code
Hi Christian,
Good catch – I’ve edited the post to remove the vestigial tag…
— Ken
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
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
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!
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. 🙂
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,
Thanks! It really works and validates XHTML!
Thanks for this, works perfect, excellent solution.
Hi, how can I use a vimeo video in a html 4.01 strict?
@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 />
[…] Or use the generator found here. Details for XHTML valid Vimeo code is here. […]
[…] Sage code swarm from Alex Ghitza on Vimeo PS: Vimeo for XHTML. […]
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.