Force fixed nav bar on top of iframe?

问题

I have navigation fixed to the top of my page, but if an iframe-embedded youtube video is scrolled over it, it shows up on top of the nav (as well as any overlay or modal window-div).

Tried setting the z-index on it, to no avail.

I've found that you can set wmode="opaque" on the embed object to get this to work with an old style flash embed, but I'd prefer to work with HTML 5 and not have to require specific settings on a video embed

http://jsfiddle.net/EB6gN/9/

回答1:

The correct answer is to set wmode=opaque as a YouTube Query String for your iframes src value.

There is no attribute Opaque for iframes. Complete list of allowed attributes are here: http://www.w3schools.com/tags/tag_iframe.asp

This updated jsfiddle contains only the HTML5 API Embed YouTube Method, leaving out the old-style embed type and the z-index that you don't want.
http://jsfiddle.net/EB6gN/16/

If you click play on your videos see a black screen, it's because of the current YouTube HTML5 Flash Fallback bug. You will see the controls once the iframe is a larger size, but the player is broken. Reference this SO post for that info:
https://stackoverflow.com/a/10560802/1195891

回答2:

JSFiddle

You Need to set wmode of the frames to opaque or transparent. And also you need to add that parameter to the youtube video in the iframe.