Drop down menu disappears behind YouTube video.

[KeithAdv]

I've been trying to solve a problem that has happened to others. I've tried the solutions I've found on-line but haven't been able to crack this one yet.

I'm using Ayoshop, and the site owner has embedded YouTube videos on some of the pages. On those pages, the drop-down menu drops over the video frame and then quickly jumps behind it. Everyone once in a while, the menu inexplicably stays but if you mouse off and mouseover again the next drop down will jump behind again.

The videos are embedded in [fve] shortcodes related to the Fluid Video Embeds plugin. I looked at the code of the plugin and changed wmode from transparent to opaque. I've taken various shots at z-indexing, but haven't found the right combination.

Has anyone here run into a similar problem (and solved it)?

Here's a page showing the problem. Mouse over the menu item "Collections":

Drop down menu problem

Thank you for all ideas!

[Landon]

I am not seeing the behavior in Safari or Chrome on OS X or IE 10 on Windows. See Grab. Am I misunderstanding?

http://cl.ly/image/1q2y452p3q3n

Landon

[emasai]

Add this to the embed code
?wmode=transparent

e.g.
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[KeithAdv]

@Landon Well, I'll be darned. It looks like I almost fixed it.

Since I've been working on the problem, I've only been checking the results in Chrome. My best guess is that when I changed the php code from wmode=transparent to wmode=opaque in the plugin I referenced, it fixed the problem in all other browsers. You're right--I've checked in IE, FF, and Safari and the menu drops down just fine.

However, in Windows Chrome the problem seems to persist. Sometimes the menu will drop down OK, but on most occasions it will disappear behind the frame. I wonder why that browser is different and what fix I would need for that?

Weird.

@emasai Thank you. However, as my original post and above reply implies, the iframe always had wmode=transparent. I changed the code to wmode=opaque which has apparently fixed 90% of the problem. The problem with Windows chrome remains.

[thecolab]

I'm having the same issue with sproudvideo iframe embeds

I'm using - eleven40 Pro Theme

[KeithAdv]

I'm bumping this just in someone has come across a solution.

Executive summary: Using the Ayoshop theme, wherever I have a main menu with a subitem dropdown and there is an embedded YouTube video underneath, the video frame immediately covers up the dropdown only for people using Windows Google Chrome.

No other browsers seem to be affected. As you can see in the thread above, I've done all the usual fixes. I just can't find the class/ID/z-index combination that will fix this, if that is indeed the way to do it.

Here's the example. Hit the link and then mouseover "collections." If you're using Windows Chrome, the problem will occur MOST of the time.

Drop down menu problem

Thanks for all insights!

[Author]

Posts