z-index and iframe issue - dropdown menu

Question

Hey. Having a rather puzzling issue with my dropdown menus and iframes.

I have applied a z-index of 1000 to the dropdown menus, however the iframe containing the youtube video still appears above the menu. See for yourself below (check the 'shortcodes' menu):

http://www.matthewruddy.com/demo/?page_id=765

I cannot figure out why this is. Can anyone help me out? Here is the CSS if it helps:

#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}

#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}

#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}

#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}

#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000;
padding: 5px 0;
-moz-box-shadow: 1px 2px 3px #a4a4a4;
-webkit-box-shadow: 1px 2px 3px #a4a4a4;
box-shadow: 1px 2px 3px #a4a4a4;
}

#jquery-dropdown ul li ul li {
margin: 0;
padding: 0;
float: none;
position: relative;
z-index: 1000;
}

#jquery-dropdown ul li ul li a {
width: 180px;
padding: 10px;
z-index: 1000;
}

#jquery-dropdown ul li ul li a:hover {
background: #e0e0e0;
}

Answer 1

Flash doesn't always play nice with z-index on all browsers, looks fine from my firefox. http://manisheriar.com/blog/flash_objects_and_z_index << I think that might be the solution that you're looking for.

Edit

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie? << similar issue here on stackoverflow

Answer 2

That is a iframe issue not a z-index .Same issue i faced i just add the ?wmode=transparent to the YouTube embed i frame src url. Like so:

 <div class="tube_box">
          <iframe width="500" height="300" src="https://www.youtube.com/embed/ngKxlkoZBLA**?wmode=transparent**" frameborder="0" allowfullscreen ></iframe>
    </div>

It Works in all browser IE,Firefox and chrome 

Here My Css :


.tube_box{
    float:left;
    width:515px;
    border:5px groove #d1e7ed;
    border-radius:11px;
    margin-bottom:10px;
    color:#b8b8bf;
    padding:10px; 
    z-index: 1000 ;

}


If you add the position:relative,absolute or anything again the drop down hiding.So avoid position its better.Another thing is  not important  to add the z-index,Without z-index also it will work .Hope so it will really helpful for you

Answer 3

I would use the embedding of the youtube video using the <object> tag and not Iframe. Then, I would use the <param name="wmode" value="transparent"> inside the <object>. Something like this:

<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

Here is some more info

Answer 4

On my machine (Chrome on Windows 7) the plugin displaying the YouTube video is a different native window than the browser content window. I think that when a plugin runs this way it renders on top of any other content in the browser, ignoring the CSS z-index values.

The Silverlight plugin has a setting to make it run in the browser content window instead of its own native window. You can try to find a similar setting for the embedded YouTube player.

Answer 5

If you want to keep using the iframe method of embedding Youtube vids, you can simply set the WMODE via query variable ?wmode=transparent. Here's an example:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe>

Would become:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Remember to check Youtube URL for any query variables already present. If there already is ?something... change ?wmode=transparent to &wmode=transparent and tack it on the end.

Answer 6

If ?wmode=transparent doesn't work, try switching to opaque instead. That worked in my case.

Sample:

(function ($) {
    $ = jQuery;

    $(function () {
        $video = $("#SomeWrapper> iframe");
        $srcVal = $video.attr('src');
        appendedVal = $srcVal + "?wmode=opaque";
        $video.attr('src',appendedVal);
    });
 })(jQuery);