Dropdown menu goes behind embedded video

[mboehler3]

On my page, I have an embedded video on the page. The problem is that my top navigation dropdown menu's go behind the video, for example when you rollover "Payroll" or "Products & Services". I want the dropdowns to appear over the video.This seems like a z-index, position issue, but what I've tried so far doesn't work. On my dev environment, I've added a "position:absolute;z-index:-20" to the embedded video, while the top navigation has a <div> tag around it that is set at "position:absolute; z-index:100" and this doesn't fix the issue. I've also tried added a "position:absolute;z-index:200" to the <ul> tag that displays the dropdown, and this doesn't work either.Is there a fix for this? Thanks in advance.

[thescientist]

although I don't see the problem in FF, i do know of the problem you speak of. Are you by chance viewing it in IE?the answer has nothing to do with z-index. instead, you should follow this convention for adding FLASH.http://www.w3schools.com/flash/flash_inhtml.aspand add this to the list of params for the FLASH object.

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

[mboehler3]

although I don't see the problem in FF, i do know of the problem you speak of. Are you by chance viewing it in IE?the answer has nothing to do with z-index. instead, you should follow this convention for adding FLASH.http://www.w3schools.com/flash/flash_inhtml.aspand add this to the list of params for the FLASH object.

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

I am viewing it in IE, but I also checked in FF v3.6.6 and the dropdown menu is still hidden by the video.Thanks for the link, but I'm not sure how to apply it to my code since it's different from the code in the example. Here's what my code looks like:

<embed src="http://sp.httpsvc.vitalstreamcdn.com/sp_vitalstream_com/mediaplayer.swf" width="560" height="330" allowscriptaccess="always" allowfullscreen="true" flashvars="height=330&width=560&file=rtmp://sp.flashsvc.vitalstreamcdn.com/surepayroll_vitalstream_com/_definst_/iphone&id=iphone_560x330ℑ=/images/video/demo_videoplaceholder.gif&searchbar=false&thumbsinplaylist=false" />

I've tried adding name="wmode" value="transparent" inside of the embed tag, and that didn't solve the problem. I'm still looking elsewhere for a solution, but not having any luck...

[thescientist]

I can view your code in the page source and I know that what I showed you is different, I was hoping you would give it a try based on the link provided. Start with what you recognize and we can work from there.

[mboehler3]

Ya I did try modifying my code, I changed it to this:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='560' height='330' id='player1' name='player1'>   <param name='movie' value='http://sp.httpsvc.vitalstreamcdn.com/surepayroll_vitalstream_com/mediaplayer.swf'>   <param name='wmode' value='transparent' />   <param name='allowfullscreen' value='true'>   <param name='allowscriptaccess' value='always'>   <param name='flashvars' value='file=playlist.xml'>   <embed id='player1'		  name='player1'		  src='http://sp.httpsvc.vitalstreamcdn.com/surepayroll_vitalstream_com/mediaplayer.swf'		  width='560'		  height='330'		  allowscriptaccess='always'		  allowfullscreen='true'		  flashvars="height=330&width=560&file=rtmp://sp.flashsvc.vitalstreamcdn.com/surepayroll_vitalstream_com/_definst_/iphone&id=iphone_560x330ℑ=/images/video/demo_videoplaceholder.gif&searchbar=false&thumbsinplaylist=false"   /></object>

And it didn't change anything.

[mboehler3]

Fixed! I needed to add wmode="transparent" to the embed code as well. Thanks for your help!