Customize fixed navigation bar on top of iframe?

Question

I have a navigation system attached to the top of my page, but if a YouTube video based on an iframe scrolls over it, it displays on top of the navigator (as well as any overlay or modal window-div).

I tried to install a z-index on it, but to no avail.

I found that you can set wmode = "opaque" on the embed object to make it work with the old-style built-in flash memory, but I would prefer to work with HTML 5 and not require specific settings for embedding video

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

Answer 1

The correct answer is to set wmode = opaque as the YouTube query string for your iframes src value.

There is no Opaque attribute for iframe. A complete list of valid attributes is given here: http://www.w3schools.com/tags/tag_iframe.asp

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

If you click the play button on your videos, look at the black screen due to the current HTML5 Flash Backback error. You will see the controls when the iframe is larger, but the player is broken. Link to this SO post for this information:
fooobar.com/questions/1412025 / ...

Answer 2

Jsfiddle

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

Learn more about wmode .

EDIT: setting everything to opaque works fine, at least in Chrome .