How to Stop YouTube Videos From Hiding Behind Drop-Down Menus

The Problem: Iframes Don’t Like Z-Index

Have you ever had this problem? Some element on your page—usually a drop-down menu, that covers areas when you hover over it that it normally would not—ends up appearing behind some other element stead of in front of it. Usually it is an iframe that pretentiously shoves its way in front of everything. Most commonly—at least in my case—this is because I am trying to embed a YouTube video.

Ordinarily you would just use the z-index CSS property to move one element in front of another. However, iframes and object tags are what is called “windowed” elements. In practice, this means they don’t obey the normal z-index rules.

Solutions for Moving Those Objects Tags Down

My research found sources that suggested applying z-index in various ways to various different elements, but none of that works.

There are several ways around this. One–although I have not tried it, because it’s a terrible solution–is to put the element you want to overlap in an iframe. If both are iframes, then z-index can be used to choose which one of them is on top of the other.

The simplest approach is just to move the movie away from where it may cover the menu. A tacky solution, but by far the simplest and most effective.

If you are embedding a flash object, such as a YouTube video, then there is another way. You would need to carefully follow these instructions.

Step one: get the old embed code

When looking at a YouTube video, click “share,” then click “embed.” Then make sure to scroll down to the advanced options and click the last checkbox, the one marked “use the old embed code.” Obviously we would be happier not using obsolete code, but this is what works.

Now you should have embed code that looks like the example below. If it’s an iframe tag, try again.

<object width="280" height="189"><param name="movie" value="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="280" height="189" allowscriptaccess="always" allowfullscreen="true"></embed></object>


Step two: add wmode transparent

Before we can make an object tag succumb to z-index manipulation, we need to set “wmode=transparent.” This actually requires modifying the embed code in two places. The added text is in blue.

<object width="280" height="189"><param name="movie" value="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"> </param> <embed src="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="280" height="189" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>

There. Now this still isn’t working–but it does mean that this specific element will respond to the z-index tag.

Step three: set z-index in CSS

You could just add

style="z-index:-1";

to the element, but it would be cleaner to add a class and style the class:

<object class="video-object" width="280" height="189"><param name="movie" value="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"> </param> <embed src="http://www.youtube.com/v/GDFUdMvacI0?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="280" height="189" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed></object>


.video-object {
z-index: -1;
}



There you have it. Not a pretty solution, but it gets the job done.

Have a better solution? I’d love to hear it–leave your thoughts in the comments!