Jump to content
Sign in to follow this  
mboehler3

Dropdown menu goes behind embedded video

Recommended Posts

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.

Edited by mboehler3

Share this post


Link to post
Share on other sites

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" />

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...