How to display video content from Vimeo with Valid XHTML
The validation enthusiast can't seem to get a break in today's fast-talkin', rich media world.
Last week, I posted a video hosted on the video-sharing site Vimeo, only to be met with irritating XHTML validation errors.
The W3C XHTML Validator FAQ suggested I try Drew McLellan’s famous Flash Satay method, but I just plain don’t have the patience to wrap every embedded video on this blog in another Flash movie, and besides IE7 fixed the problem that motivated the Satay technique in the first place.
On top of all that, this particular error was incredibly easy to fix. (Which does make you wonder why Vimeo didn’t just fix in the first place!)
Nuts and bolts now. Here’s what they give you:
<object width="400" height="302"> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="uri" /> <embed src="uri" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="302"></embed> </object>
Okay. What do we notice here? First, Vimeo gives us three tags to embed a video, two of which (<object> and <param>) we recognize as valid.
Let’s break down the one tag we don’t recognize as valid, the <embed> tag. It holds the following information:
- src: This is the location of the video we want to show.
- type: This tells the Flash player’s MIME interpreter that we’re looking at a file it can read.
- allowfullscreen: This is a Flash player paramater that lets us (the content provider) allow our users to watch the video at full screen size (true) or not (false).
- allowscriptaccess: This is another Macromedia-defined paramater, which controls the ability to perform outbound scripting from within a Flash SWF.
- width: The width of the video.
- height: The height of the video.
Now here’s an interesting fact. Numbers (1), (3), (4), (5) and (6) are already defined in this object without the <embed>. The only data point that’s not already defined (2) is the MIME type of the embed tag itself!
Furthermore, one might have noticed already that the object tag supports a "type" attribute as well.
So, given that all that, it is incredibly easily to rewrite this as a valid XHTML object:
<object width="400" height="302" type="application/x-shockwave-flash" data="uri"> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="uri" /> </object>
Comments on this post
1.
Hi Paul - that is Flash Satay. The container movie thing is just an option to enable streaming. I think you’ll find that most video sharing services effectively have their own container movie (their ‘player’ with transport controls etc) that then load in the actual content afterwards.
Anyway, good to see Satay still finding the occasional use 6 years on!
2.
Hey Drew -
Now that you mention it, it makes sense to me that Vimeo’s using a Satay-style container-movie technique. At any rate, the problem we (BlogLESS) were faced with was that the XHTML they gave us to embed their video in our blog didn’t validate. Your article does cover these changes as well, but for what it’s worth, on my reading, I thought the Satay technique proper was the container movie idea.
Further, the problem that you cited as motivating the inquiry:
seemed to no longer exist. So, apologies for the confusion on my part. When I said I didn’t want to use the Satay technique, what I meant was that I didn’t want to maintain a local container swf, and that moreover it was unnecessary, as all the relevant XHTML was available in a standards-compliant way.
By the way, congratulations on the W3C recommending your technique; that’s a nice endorsement indeed. Thanks for stopping by.
3.
Hi Paul,
Thanks so much for posting this! I have been struggling to embed videos such that they are standards compliant, work in all browsers, and permit fullscreen play. This works like a charm.
4.
Michael - Glad I could be of help!
5.
Thanks for posting this, works great.
Can’t understand why Vimeo would provide invalid code; the modified version works fine in both IE6 and 7.
6.
Thanks for the post, it was really useful and helpful. I tried to embed vimeo videos in my site without any good result. Thought the CushyCMS had a bug or something… but the explaination on the HTML strict is all I need to know (for now)…
chau!
7.
Ben and Carlos - Very glad to help, and thanks for adding your comments.
8.
Wonderfully helpful, thank you!
9.
big cheers to you Paul - very simple, very handy.
Trackbacks