Managing HTML / Flash overlay problems

I'm currently working on a live video-chat solution named Butterflive (more on that later).

The chat window is a div with absolute positionning. When the chat window was moved above a flash video (a SWF), I noticed strange results (see below).

You can see that some parts of the chat window are going above and some parts are going below the Flash movie.

I tried to tweak the zindex CSS property without any success.

Actually, the problem comes from Flash.

By default, Flash gets a handle on the browser's window, and directly outputs the content of the movie on top of the HTML.

So by default, Flash bypasses any instructions in CSS that would require the movie to be displayed above or below other HTML elements.

Hopefully, Flash movies come with a "wmode" parameter that can be set to tell Flash to embed the video inside the HTML.

Here are the 3 possible values:

• "Window": This is the default behaviour: Flash is displayed on top,
• "Opaque": In this mode, HTML elements can be rendered on top of Flash,
• "Transparent": In this mode, if the Flash movie is transparent, HTML elements can be displayed on top or below the Flash movie. This mode is the most CPU intense.

Also, since Flash player 10, there are 2 new values:

• "direct", that completely bypasses the browser,
• "gpu", that uses hardware accelerated compositing.

So the solution for me was to modify the "wmode" parameter in the HTML that loads the Flash movie, in this way:

<object type="application/x-shockwave-flash" ... >
   <param name="wmode" value="Opaque" />
   <embed wmode="Opaque" ...>
   </embed>
</object>

After this, the results are perfect!

You can find more information about the wmode settings here and here.