CSS dropdown menu displays behind video

Question

I have a css drop down menu, so that when you hover over a menu item a submenu drops down. I am also displaying a .wmv video on the page. However when the sub menu drops down, it displays behind the video. I've read where anything in the object tag automatically gets the maximum z-index, so setting the z-index doesn't fix the issue. I haven't been able to find any solutions or work arounds. Is there a work around or some way to fix this so that the drop down menu displays in front of the video? This seems to be happening in IE and Firefox.

Answer 1

AFAIK you have to set the background of the player object to be transparent. Like this:

<object ... >

   <param name="filename" value="http://yourdomain/yourmovie.wmv">
   <param name="wmode" value="transparent">

   <!-- other params -->

   <embed ... wmode="transparent"></embed>
</object>

Hope it helps. I don't remember exactly all the params and so on, but it should do the trick.

Answer 2

I agree with zerolab. If wmode transparent doesn't do the trick though, try:

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

Answer 3

There should be ways to achieve that by css and embedded video player's options but as a quick solution check this one as a jquery help.

http://docs.jquery.com/Plugins/bgiframe

Hope it helps, Sinan.