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>