Tutorial :Flowplayer is above modal window


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.


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


How to pass the wmode = transparent parameter into Flowplayer:

Flowplayer expects three arguments in the embed call.
1) Container ID
2) Parameters. (string or object)
3) Configuration (plugins or appearance settings)

More details: http://flowplayer.org/documentation/api/flowplayer.html

The wmode parameter must be passed through the the 2nd argument. If it's a string, Flowplayer expects it to be the URL to the Flash player. To pass additional parameters, it must be done as a JSON object.


No wmode:

        $f("video-player", "flowplayer.swf" {              plugins: {                  controls: {                  buttonOffColor: "#4523d3",                  borderRadius: "0",                  sliderColor: "#4523d3"              }          }      });    

With wmode:

        $f("video-player", {                  src:"flowplayer.swf",                  wmode:"transparent"              }, {              plugins: {                  controls: {                  buttonOffColor: "#4523d3",                  borderRadius: "0",                  sliderColor: "#4523d3"              }          }      });    


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:



If your are setting the flowplayer params using jquery then we have to place this as

 $f("playback", { src: js_path , wmode:"transparent" } , {      clip: {          url: videoFile ,                     autoPlay:  false,          autoBuffering: true,          scaling: 'fit'                  },  

means do not set that parameter in clip array, It wont work there.

Hope it helps some one.


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?


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?

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »