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> |
| Tagged with: | Flash, How-to, HTML, Rich Media, Validation, Video, Vimeo, Web Standards |
Post a comment
Want to know more?
You're reading BlogLESS, a thrice-weekly blog about the ethics of advertising, branding, design, social media and business. We are also fans of zen, although this itself is perhaps not so zen.
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.
10.
Hello – I’m trying to do the same thing with Houndbite but not quite sure where it’s going wrong.
11.
Hey Wendy. I got Houndstooth code working. I took out most of the values below, but you can copy them from the Houndstooth default embed code.
It is worth noting that even once you do this, you’re going to have invalid HTML because of unencoded URLs. Their
flashvarsurl has a couple of question marks in it, which you’ll want to escape. Like this:myurl.tld/etc/mp3name.mp3%26autoplay=0%26duration=110000
12.
¿Could somebody please post how to do this for 4.01 strict?
Thank you.
13.
It works fine in IE explorer, but it does not in opera and chrome.
14.
Thank you!
15.
Paul – You are the SMARTEST MAN ALIVE!
Thank you – your solution was a real godsend for a newbie web person like me!
16.
This was super useful! Thanks for the help.
17.
Works great on Mac in Firefox, Safari, Chrome and Opera. Thanks!
18.
Thank you very much, fixed 10 errors with this fix, and vimeo site doesnt give this :)
19.
For me, I couldn’t get the Vimeo Video to work in IE8 until I got rid of the script code preceding the . Checking out the code on Vimeo’s blog helped me out:
http://vimeo.com/forums/topic:3148
All you need is this:
Try stripping out the AC script info you have above the object if you still can’at see the videos in IE.
20.
whoops, I mean here is the link to the Vimeo Blog:
http://vimeo.tumblr.com/
21.
Thanks for this fix. However I have one small problem. When my video loads in for a split secound you can now see a broken image link the the video loads on top of it.
This did not happen when using the orginal Viemo code.
Any ideas on how I can fix this?
22.
Can anyone help me solve this problem below:
Line 308, Column 40: cannot generate system identifier for general entity “job”
… Ajax.call(‘user.php?act=email_list&job=add&email=’ + email.value, ”, rep_a…
✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in “Ampersands in URLs”.
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as “&” (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
If this error appears in some markup generated by PHP’s session handling code, this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Trackbacks