I'm having a problem with overlaying divs. It's not a z-index issue, but rather something to do with iframes.
After reading How to show a div over a Youtube video (z-index)?, I tried adding &wmode=opaque
to the urls on the src attr of the vimeo and youtube iframes.
This solved the problem once, but even when the code is the same, it didn't work for other iframes, and I don't know why. :S
This is the website: http://beacabrera.es
Hovering the menu at the top (scroll to see it) unveils a fixed div that should overlap the vimeo videos. There are two videos. It works with the first one, but not with second.
I encountered the same issue here: http://www.marshmallowsandgasoline.com. Same menu at the top (scroll a little to see it) but the submenu will not show up even though all videos on iframes have &wmode=opaque
.
As an example, the way for showing and hiding the submenu items is on all cases as follows:
$("#menuitem")
.mouseenter(function(){
$("#submenuitem").fadeIn("fast");
})
.mouseleave(function(){
$("#submenuitem").fadeOut("fast");
});
And it works when there are no iframes involved.
I know there's always an answer to these problems. I'll appreciate any idea.
Thank you in advanced.
Bea.