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 on the movie's clickables could include 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>
<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).
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.
<embed wmode="opaque" ... />
The standards compliance freaks really don't like the EMBED-tag-only method. And for good reason, I have to admit.
<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.
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".
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.