Blogless: Blog of Design Less Better.

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:

  1. src: This is the location of the video we want to show.
  2. type: This tells the Flash player’s MIME interpreter that we’re looking at a file it can read.
  3. 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).
  4. allowscriptaccess: This is another Macromedia-defined paramater, which controls the ability to perform outbound scripting from within a Flash SWF.
  5. width: The width of the video.
  6. 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>
These icons link to social bookmarking sites where readers can share and discover new web pages.
PaulAug 6, 2008
 

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!

Drew McLellan at 8:45am on Wed, Aug 6th.

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:

The only problem with the code I had is that IE/Windows doesn’t stream the movie. It waits for the whole movie to download and then plays it. This is fine for very small movies, as the wait isn’t that noticeable. So, how about creating a very small container movie, which in the first frame loads in the real movie we want to play?

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.

Paul at 9:08am on Wed, Aug 6th.

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.

Michael at 8:24am on Tue, Aug 12th.

4.

Michael – Glad I could be of help!

Paul at 12:22pm on Tue, Aug 12th.

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.

Ben at 5:05am on Wed, Jan 14th.

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!

carlos at 9:29pm on Sat, Feb 21st.

7.

Ben and Carlos – Very glad to help, and thanks for adding your comments.

Paul at 11:13pm on Sat, Feb 21st.

8.

Wonderfully helpful, thank you!

Jeremy Gustafson at 9:37am on Fri, Feb 27th.

9.

big cheers to you Paul – very simple, very handy.

the_guv at 11:07pm on Wed, May 6th.

10.

Hello – I’m trying to do the same thing with Houndbite but not quite sure where it’s going wrong.

Wendy! at 7:50pm on Sat, Jul 11th.

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.

<object codebase="" data="" type="" align="" height="" width=""> 
   <param name="allowscriptaccess" value="" /> 
   <param name="bgcolor" value="" /> 
   <param name="flashvars" value="" /> 
   <param name="movie" value="" /> 
   <param name="pluginspage" value="" />
   <param name="quality" value="" /> 
</object>

It is worth noting that even once you do this, you’re going to have invalid HTML because of unencoded URLs. Their flashvars url 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

Paul at 8:16am on Tue, Jul 14th.

12.

¿Could somebody please post how to do this for 4.01 strict?
Thank you.

Mario at 10:56am on Sun, Jul 26th.

13.

It works fine in IE explorer, but it does not in opera and chrome.

Godofredo at 7:09pm on Mon, Sep 7th.

14.

Thank you!

Konrad at 3:50pm on Sun, Jan 10th.

15.

Paul – You are the SMARTEST MAN ALIVE!

Thank you – your solution was a real godsend for a newbie web person like me!

Shari at 12:15am on Sun, Mar 28th.

16.

This was super useful! Thanks for the help.

Kit MacAllister at 2:09am on Fri, Apr 2nd.

17.

Works great on Mac in Firefox, Safari, Chrome and Opera. Thanks!

Christian at 5:50am on Fri, Apr 2nd.

18.

Thank you very much, fixed 10 errors with this fix, and vimeo site doesnt give this :)

Gamos at 2:20pm on Wed, Apr 21st.

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.

Jenn at 1:57pm on Sat, Jul 3rd.

20.

whoops, I mean here is the link to the Vimeo Blog:
http://vimeo.tumblr.com/

Jenn at 1:59pm on Sat, Jul 3rd.

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?

Mario T at 3:37am on Wed, Oct 6th.

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.

Y Te Quan Doi at 9:33am on Sat, Apr 13th.

Trackbacks

  1. BlogLESS : Using Flash Satay for valid YouTube embeds on Mon, Sep 15th
  2. Embed Vimeo Valid XHTML dan HTML 5 | All Tutorials - Blogger - Wordpress - Joomla - Design - Insurance on Thu, Oct 8th
  3. Pattern Inc » How to Code up a Web Design from PSD to HTML on Mon, Feb 15th
  4. How to Code up a Web Design from PSD to HTML | pro2go Designs Blog on Wed, Mar 10th
  5. Vídeos en XHTML | Iván Montoro on Fri, Apr 2nd
  6. How to convert PSD to HTML? | Agilia Technologies on Thu, Feb 2nd
  7. Full Online Tutorial » How to Code up a Web Design from PSD to HTML on Thu, Nov 15th
  8. How to Code up a Web Design from PSD to HTML | DWH-UK.com : Great Themes at Sensibles Prices! on Tue, Mar 5th

Post a comment

Name
Email
Url
Comment
  Please feel free to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Validate

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.