WMODE Woes: WMODE Transparent

Alas, the design task given to me was to implement a set of buttons that would lay opaquely over a video being rendered in a browser either by Quicktime plugin (on Win/Mac) or a custom video player plugin (on Linux, Ubuntu specifically). sounds like a pretty straight forward task, right?

Oh, so _WRONG_ I was. of course, being the css-happy dev that I am my first attempt was to use the z-index and lay some nice divs containing transparent PNG's over the video...STRIKE 1! Apparently browser plugins don't typically respect the z-order (or the browser rendering stack at all)!

Diving in a little deeper, I discovered that when a browser plugin is rendering something for the browser, it is basically receiving coordinates from the browser and then drawing/rendering the correct dimensions and placement of the content so that it appears to be laid on top of the browser. It technically lives within the window of the browser but above all notion of the browser content stack and therefore outside of the z-index.

This is where Flash came in. Flash, being a plugin itself could actually render above other plugins if said plugins and their containing divs were ordered on the page correctly. This was back in the dark ages though, before we had Firefox 3.0. When 2.0 was around the SWF, if placed on the page in a div before the video player, would render on top of the video. Even if the wmode was set to 'transparent' which allowed you to...viola!...have buttons transparently overlay onto a video screen.

Then Firefox 3.0 came stomping into the room and we all jumped ship and latched onto the new "ooh, ooh, shiny!" browser. As the tarnish of Firefox started to rear its ugly head the Flash developers realized that the new implementation of wmode broke their nice websites into pieces because transparency didn't work the same.

Woe and behold it also changed the rendering Easter Egg I previously mentioned. Wmode is a tricky parameter because of the very nature of what it does to the plugin.

I don't think I've seen someone ever just lay out how it works. Here's the real deal:

What a whirlwind of information, I know, but I hope to some that it will be helpful and save hours of hair-pulling, frustration, weight gain/loss, or overdosing on over the counter meds.

For a more technical explanation of this (although a little older--four versions of Flash back) check out Stephanie Sullivan's article at http://www.communitymx.com/content/article.cfm?cid=e5141