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.

Trackbacks

  1. BlogLESS : Using Flash Satay for valid YouTube embeds on Mon, Sep 15th

Post a comment

Name
Email
Url
Comment
  Please feel free to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Validate
Close this
E-mail It