z-index and iframe issue - menú desplegable

Question

Hey. Tener un problema bastante desconcertante con mis menús desplegables e iframes.

He aplicado un índice Z de 1000 a los menús desplegables, sin embargo, el iframe que contiene el video de youtube aún aparece sobre el menú. Ver por sí mismo a continuación (consultar el menú 'cortos'):

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

No puedo entender por qué es esto. ¿Puede alguien ayudarme? Aquí está el CSS si ayuda:

#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

me gustaría utilizar la incorporación del video de youtube usando la etiqueta <object> y no Iframe. Entonces, usaría el <param name="wmode" value="transparent"> dentro del <object>. Algo como esto:

<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 2

En mi máquina (Chrome en Windows 7) el plugin que muestra el vídeo de YouTube es una ventana nativa diferente a la ventana de contenido del navegador. Creo que cuando un complemento se ejecuta de esta manera, se muestra encima de cualquier otro contenido en el navegador, ignorando los valores de z-index de CSS.

El complemento Silverlight tiene una configuración para que se ejecute en la ventana de contenido del navegador en lugar de su propia ventana nativa. Puede intentar encontrar una configuración similar para el reproductor de YouTube incorporado.

Answer 3

El flash no siempre funciona bien con z-index en todos los navegadores, se ve bien desde mi Firefox. http://manisheriar.com/blog/flash_objects_and_z_index < < Creo que esa podría ser la solución que está buscando.

Editar

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie? < < problema similar aquí en stackoverflow

Answer 4

Si desea seguir usando el método para incorporar vids Youtube iframe, sólo tiene que establecer la variable de consulta a través de WMODE ?wmode=transparent. He aquí un ejemplo:

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

se convertiría en:

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

Recuerde revisar el URL de Youtube para cualquier variables de consulta ya presentes. Si ya existe ?something..., cambie ?wmode=transparent a &wmode=transparent y virela en el extremo.

Answer 5

Si? Wmode = transparent no funciona, intente cambiar a opaco en su lugar. Eso funcionó en mi caso.

muestra:?

(function ($) { 
    $ = jQuery; 

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

Answer 6

Eso es una cuestión de marco flotante no es un problema .Same índice z i i enfrentado a añadir el wmode = transparente para el YouTube incrustar I Chasis url src. De la misma manera:

<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