embedded youtube video sits in front of dropdown css menu

[stevegos]

Hi

I have a css menu using the "Navigation: CSSMenu - Horizontal" style sheet for the menu. CMSMS is 1.11.1.

Just below the css drop down menu is an embedded youtube video. The css menu drops behind the youtube video (which I expect is flash).

I have tried the usual z-index and transparency modes for the embed but still cannot fix it.

Here's some of the code:

Code: Select all

<div class="fltlft frontVideo" style="z-index:-999;"><__iframe width="547" height="300" allowtransparency="allowtransparency" wmode="transparent" src="http://www.youtube.com/embed/#######?rel=0?wmode=transparent" frameborder="0" allowfullscreen></__iframe></div>

As you can see I've added an inline z-index:-999 to try to push the flash containing div to the bottom and added z-index:999 to the div containing the menu. I've also added numerous transparency elements to the youtube embed code as per other forum advice.

But the drop down menu still sits under the video.

Any ideas?

All help greatly appreciated.

Thanks, Steven

[velden]

Once had a same issue for a customer of mine. Might be the same issue (and solution)

http://www.piethoevenaars.nl/machines.html

Can't find the original article which describes the solution. But it was a combination of:

p2q_EmbedFlash('printen.swf','850','310','allowFullScreen','true','bgcolor','#ffffff','wmode','transparent','FlashVars',flashvars);

css:

#bgmenu div ul.menu li ul li a {z-index : 4000 !important;}
#bgmenu div ul.menu li ul li {z-index : 5000 !important;}
#bgmenu div ul.menu li ul {z-index : 6000 !important;}
#bgmenu div ul.menu li {z-index : 6500 !important;}
#bgmenu div ul.menu {z-index : 7000 !important;}
#bgmenu div {z-index : 8000 !important;}
#bgmenu {z-index : 9000 !important;}
#bgmenu1 div ul.menu li ul li a {z-index : 4000 !important;}
#bgmenu1 div ul.menu li ul li {z-index : 5000 !important;}
#bgmenu1 div ul.menu li ul {z-index : 6000 !important;}
#bgmenu1 div ul.menu li {z-index : 6500 !important;}
#bgmenu1 div ul.menu {z-index : 7000 !important;}
#bgmenu1 div {z-index : 8000 !important;}
#bgmenu1 {z-index : 9000 !important;}

Had something to do with the menu where every level (div, div ul, div ul li) had to have a higher z-index. I've also seen a jQuery script accomplishing that same behaviour.

I guess this might help you.

[stevegos]

Thanks for the info.

I added the z-index:999 to all the menu and drop down elements but no good.

I have fixed it! The original youtube embed code had ?rel=0 at the end. I read on another post to put ?=wmode=opaque at the end but it didn't like being used with the ?=rel deleting this fixed the problem.

[Dr.CSS]

Most times you only need to give the UL UL a higher z-index not everything up to and after that point, and wmode transparent on the video helps...

[Wishbone]

What's the URL for the site in question?