« Back to main projects page.
 

Figleaf: JavaScript-powered Flash movie overlay

Download source

flashFigleaf.js (5k)

At work, we needed a way for people to be able to select from a "list" of thumbnail-sized Flash movies. The way it would work is that when they clicked on a Flash movie's thumbnail, the correct HTML for that movie would be inserted into an editor. Of course, if the movie has things you can click on then clicking them could change the page's URL or open a new window. This behavior was undesired.

Since no one seemed to really know how to go about this (they all pray at the .Net altar; I'm the lone JavaScript enthusiast), I banged out this extremely simple solution over the weekend. It doesn't add a link to the overlay; that wasn't really what I was aiming for. But you get a reference to the overlay's DOM node to do with what you will, which for my limited interest was enough.

OBJECT tag only

Code

<object>
 <param name="wmode" value="transparent" />
 ... movie params, alternative content...
</object>

This works fine when the movie is wrapped in an OBJECT tag as opposed to just an EMBED tag (as Google & other sites would have you do).

The point:

This movie isn't just funny-looking, it's also clickable. But you can't tell because this overlay is doing it's job: preventing your clicks from getting to the movie.

Movie

The Colbert Report - Monkey on the Lamb

If you're reading this, you either don't have the Flash player, or it's disabled, or I messed up. If the latter is the case, please let me know.

 

The less kosher EMBED-only style (not wrapped in an OBJECT tag)

Code

<embed wmode="opaque" ... />

The standards compliance freaks really don't like the EMBED-tag-only method. And for good reason, I have to admit.

Movie

EMBED inside an OBJECT tag (a.k.a. "Twice Cooked")

Code

<object>
 <embed ... />
 <param name="wmode" value="transparent" />
 ... movie params, alternative content...
</object>

This doesn't work on Safari or Chrome, so I'm probably doing something wrong (no Flash guru, I). I believe it works on most other modern browsers, however.

Movie

Portal by valve

If you're reading this, you either don't have the Flash player, or it's disabled, or I messed up. If the latter is the case, please let me know.

 
 

How it works

Basically the code searches the DOM for Flash objects, gets their coordinates, height, and width, and places either a fixed-position DIV or image on "top" of the movie. The level of transparency is configurable, as is the color (of the DIV, anyway), and the image to be used. Using a DIV is, of course, a more flexible approach. I kept this REALLY simple and easy to follow so others could either use it, change it, or take the idea and run with it.

Also: please note that, in order for this to work, you need a "wmode" parameter for your movies, and it cannot be "window". In other words, it can either be "opaque" or "transparent".

Compatibility

At least so far, this appears to work on Windows using Firefox 2, IE 7, Safari 3.0.3 & Chrome 1.0.154 (with the one exception, above), and Opera 9.24.

If you know of this working/not on any OS-browser combinations, please let me know.

Creative Commons License

 
 
« Back to main projects page.