Force fixed nav bar on top of iframe?
css, css-position, embed, iframe, youtube
Solution
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
Problem
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/