Question

I have a flowplayer that I am using with a few div tags below it. When you click on div tag it will display another div tag same like dialog box over the page. The problem is the flowplayer will always be on top of the div.

I have tried setting the z-index of the div, but it doesn’t work.

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

I also use wmode property for flowplayer but still it doesn’t work.

Following is my code:

<script type="text/javascript" src="/common/js/flowplayer-3.2.9.min.js"></script>
<a href="<?php echo $this->hotelVideoUrl; ?>"
   style="display:block;width:304px;height:208px; z-index: -1; position: relative;"
   id="player">
</a>

<script language="JavaScript">
    flowplayer("player", "/common/js/flowplayer-3.2.10.swf",{         
        clip:  {
            autoPlay: true,            
            autoBuffering: true            
        },
        wmode: 'opaque/transperent'
    });
</script>   

Answer 1

Modify you following code :

wmode: 'opaque/transparent'

To

wmode: 'opaque' or wmode: 'transparent'