Question

I have a flowplayer that I am using with a few pictures below it. When you click on these pictures a dialog is created with an enlarged version of these pictures. The problem is the flowplayer will always be on top of the dialog.

I have tried setting the z-index of the dialog high and the flowplayer low, but it doesn’t work.

Is there a method in flowplayer that will lower its z-index or allow for my dialog to be placed over it?

Edit Heres the flowplayer:

//Uses flowplayer to create player
$f('#rightVideoContent', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    //Creates a single clip for the flow player
    clip: {
        url: videoLocation,
        autoPlay: true,
        autoBuffering: true
    },
    plugins: {
        controls: null
    },
    onLoad: function () {
        //Do nothing here
    }
});

And here is the div

<div id = "rightVideoContent" class = "VideoDiv"></div>

I use flowplayer-3.2.6.js as well

Answer 1

I think what you’ve missed is :

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

a bit more about wmode

edit: take a look at your code … to embed a swf file you gotta have something like:

<object width="550" height="400">
    <param name="movie" value="somefilename.swf" />
    <embed src="somefilename.swf" width="550" height="400"></embed>
</object>

all you need to do is just add another <param ... after the first one

edit2: you should replace the second parameter … instead of the url string put there

{src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'}