WMODE Woes: WMODE Transparent
Posted by Brian Merz on 01 / 22 / 2009
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:
wmode = window (default)
* If you don't use wmode or you set it explicitly to 'window' then the plugin will render as expected, on top of the browser stack and in order of sequence of the actual HTML (embed/object) tags on the page. Transparency is not allowed and any areas with no Flash content will be rendered the solid background color of the SWF.
wmode = transparent/opaque
* These two do basically the same except they take the SWF and actually make it part of the browser stack if held inside some container tag. This means that z-order is respected but the SWF will not be able to be above any other browser plugin rendered content on the page regardless of the order of the content in the HTML. Finally, the transparency is available so that any area of the SWF with no content will be rendered transparent but without the ability to lay over any type of plugin content in the page.
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