Flowplayer playing over everything

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

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

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'}

edited May 23 '17 at 11:55

Community

1
1

answered May 13 '11 at 13:26

Teneff

30,564
13
72
103

Would I put this in the head or in the `div` that makes the flowplayer? Do you have an example of it? – Soatl May 13 '11 at 13:32
@SsRide360: You put some code that applies `wmode` with a value of `transparent` (or `opaque`) inside the JavaScript that embeds your video player. See the links in my answer. – thirtydot May 13 '11 at 13:35
@SsRide360 I guess you're using javascript to embed it ... if you tell me which is the library that you use I can be more specific :) – Teneff May 13 '11 at 13:40
In the edit I will show the flowplayer I use and how I make it (through js) – Soatl May 13 '11 at 13:53
I tried this `$f('#rightVideoContent', {src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'}` but I keep getting errors : `missing ) after argument list` – Soatl May 13 '11 at 14:26
I also tried this: `clip: { wmode: 'transparent', url: videoLocation, autoPlay: true, autoBuffering: true },` Which did not give an error, but the clip was still above the `dialog` – Soatl May 13 '11 at 14:31
Got it. Needed a ',' after `{src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'},` – Soatl May 13 '11 at 14:37

score 3 · Answer 2 · answered May 13 '11 at 13:24

You probably need to embed the flash with wmode="transparent".

As in @locrizak's answer, you can also use wmode="opaque", which is better because it's less processor intensive.

These should help:

score 1 · Answer 3 · edited Jun 22 '12 at 06:48

1

I had trouble with this and Flowplayer wouldn't add the wmode parameter no matter what i tried

I used this jQuery snippet and it solved it!

$('#videocontainerid object').prepend('<param name="wmode" value="opaque">');

or for every object:

$('object').prepend('<param name="wmode" value="opaque">');

edited Jun 22 '12 at 06:48

Jon Lin

142,182
29
220
220

answered Jun 22 '12 at 00:44

Sam Deering

369
1
7

score 1 · Answer 4 · answered Nov 19 '13 at 16:02

1

see HTML Overlays in Flowplayer
example code:

flowplayer("player", {  
    src:"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",  
    wmode: "opaque" // This allows the HTML to hide the flash content  
    }, {  
    clip: {  
      url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'  
    }  
});

answered Nov 19 '13 at 16:02

David

746
6
18

Great. Thanks for posting the link. – Fernando Jun 02 '14 at 09:39

score 1 · Answer 5 · answered May 13 '11 at 13:24

1

You need a

wmode: "transparent/opaque"

parameter on the flash object.

answered May 13 '11 at 13:24

locrizak

12,192
12
60
80

Flowplayer playing over everything

5 Answers5

Linked