Showing DHTML content on top of flash content

I get asked about this often in my training courses so I thought it might be good to air the issue here. I’m not the first to post about this online but for some reason many people aren’t finding the solution so here it is.

The problem

How to show DHTML content (e.g. a pull-down menu) on top of flash content?

The cause

By default, browser plug-in or activeX content (from now on I’ll refer to plug-in content when meaning both) is displayed in its own window. It doesn’t look like it’s in it’s own window because the window in question has no borders, title bar or anything else we normally associate with a window, but from the computer’s point of view it is a window. Windows occupy rectangular areas of the screen and each window is displayed above or below other windows.

In the case of plug-in content, the plug-in renders its content in a borderless window that is displayed above the content of the browser window. So, by default, the flash content will always be displayed above all the html page content, regardless of the z-index setting in the css style for the content.

The simple reasons for this are speed and simplicity – the plug-in gets to display whatever it likes in it’s area of the screen without the need to merge this content with the html content displayed by the browser

The solution

Fortunately, flash has a setting to prevent the plug-in content being displayed in its own window. The object and embed tags have a parameter/attribute called the “wmode”. This parameter takes one of three values – “window”, “opaque” or “transparent”. The value controls how the plug-in displays the content with respect to the default behaviour described above. Most modern browsers support the wmode parameter (see Adobe’s list of supported browsers).

The “window” setting is the default and behaves as above, with the flash content rendered in its own borderless window above the page content. The other two settings, “opaque” and “transparent”, render the flash content within the browser window itself, with transparent showing the flash movie with a transparent background so elements behind it can be seen. Choosing either of these settings will enable you to display the DHTML content above the flash content. I’d recommend opaque unless you really need transparent, since transparent can cause some slowdown in the flash movie playback.

So, in brief, set wmode to opaque and then you can display the DHTML content above the flash using the z-index css property to control the layering.