We get asked a lot of times about Z index’s to fix drop down menus hiding behind a youtube video.

There is many different ways to fix this problem but it seems you are fighting against Internet Explorer each time you fix this in another browser.

To explain the problem, when you add the iframe to your code to call the YouTube video for example you will use:-

https://www.youtube.com/embed/InDMh5s0-q0

No in the browser no matter what you do you get a z-index greater then everything else which means that YouTube video will be overlayed on top of anything and this is why you bang your head against the wall fixing with CSS.

https://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque

To overcome this issue you can tell the YouTube video how to behave adding the following code:-

<iframe class="youtube-player" type="text/html" 
width="640" height="360"
src="http://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque" 
frameborder="0"></iframe>

This fix works and the drop down menu will appear over the YouTube video. But the problem is you have to remember to add this to each video you embed so here a fix you can add to the header of your website coding and it will automatically add the required fix so you can embed normally and let the coding do the hard work.

function addToQueryString(url, key, value) {
    var query = url.indexOf('?');
    var anchor = url.indexOf('#');
    if (query == url.length - 1) {
        // Strip any ? on the end of the URL
        url = url.substring(0, query);
        query = -1;
    }
    return (anchor > 0 ? url.substring(0, anchor) : url)
         + (query > 0 ? "&" + key + "=" + value : "?" + key + "=" + value)
         + (anchor > 0 ? url.substring(anchor) : "");
}