jquery ui dialogue box going behind Flow player

Question

i'm using flow player and jquery ui in project.

My problem is when i open a jquery ui dialogue box it going behind the flow-player. this is happening only in internet explorer.

i have tried in both IE9 and IE11 But the problem remain same. It's working perfectly in Google Chrome.

Interestingly i noticed in Firefox the jquery ui dialogue box appearing above the flowplayer but jquery ui overlay which will appear behind the jquery ui dialogue box appearing behind the flowplayer. Mean jquery ui overlay above on it flow player above on flowplayer jquery ui dialogue box.

Even i tried increasing the z-index of dialogue box but there is no use. Please help me to sort this out.

Thanks in advance.

Answer 1

I assume you are using flowplayer flash. If so try setting the wmode to opaque. This will allow the player to respect z-indexes.

Example taken from flowplayer site

flowplayer("player", {
    src:"http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
    wmode: "opaque" // This allows the HTML to hide the flash content
    }, {
    clip: {
      url: 'http://stream.flowplayer.org/flowplayer-700.flv'
    }
});

For more detailed info see the flowplayer wmode demo