Flash Rendering on top of HTML Elements

I’ve had few problems recently with Flash content rendering over the top of HTML elements, especially when using CSS based fly-out menus. Here’s an example of the problem, showing how Flash content is rendered over the top of the HTML drop-down menu.

Flash Wmode (Windowed)

This is quite annoying, especially after we’ve spent a lot of time developing a Flash intro movie for a client, only for them to ask if they can have drop-down menus on their home page too!

After a bit of digging around I came across the WMODE parameter which controls how the browser renders Flash content. There are three possible options, ‘window’ (default), ‘opaque’, or ‘transparent’. The example above shows the effect of the default option (‘window’).

Setting WMODE to ‘opaque’ has this effect

Flash Wmode (Opaque)

You can see the effect this has, but the background of this Flash movie is set to gray, so content underneath the Flash movie won’t be visible, so we’re 80% there…
Setting WMODE to ‘transparent’ fixes both issues, as you can see.

Flash Wmode (Transparent)

For more details embedding flash content you should check out the article over at A List Apart. There’s also an article on the Adobe website about wmode and how Flash is rendered.