Flowplayer is above modal window

Question

In my web application, I have webpages where people can watch videos. I'm using Flowplayer for playing flash videos. You can see it here: http://flowplayer.org/

I also use modal windows in my web application. I'm creating them with this jQuery plugin: http://code.google.com/p/jquery-modalbox-plugin/

Modal windows work great. The only problem is that when there is a flowplayer video anywhere on the page where I want to have a modal window appear after clicking some link, the flowplayer appears above the modal window. Rest of the page appears correctly behind the modal window.

Any ideas how to solve this?

I don't really want to get rid of the Flowplayer ebcause it has served me well and it also looks very nice graphically.

Answer 1

Have you tried to put Flowplayer in a with a negative z-index? Or the other way around, put the modalbox in a with high z-index?

Answer 2

Maybe you could overwrite the generated css to change the z-indexes after they load? Find out what classes or elements are generated and then make css rules with higher specificity to overwrite the z-indexes. Also, what does your code look like?

Answer 3

You have to set wmode="transparent" to the flash file.

Answer 4

See here, basically:-

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

OR Add the following parameter to the EMBED tag:

wmode="transparent"