CODEWITHSUNDEEP
jquerycssflashmodal-dialogflowplayer
Richard Knop
Richard Knop

Reputation: 83755

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.

Upvotes: 1

Views: 3792

Answers (6)

Anuja P
Anuja P

Reputation: 2143

If you 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'            
    },

In other words, do not set that parameter in clip array; it won't work there.

Upvotes: 1

Nathan Hiemstra
Nathan Hiemstra

Reputation: 171

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.

Examples:

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"
            }
        }
    });

Upvotes: 5

Rippo
Rippo

Reputation: 22424

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"

Upvotes: 1

Ionuț Staicu
Ionuț Staicu

Reputation: 22204

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

Upvotes: 5

ryanulit
ryanulit

Reputation: 5001

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?

Upvotes: 0

Density 21.5
Density 21.5

Reputation: 1930

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?

Upvotes: 0

Related Questions