Problem z-index i iframe - menu rozwijane

Question

Hej. Mam dość zagadkowy problem z rozwijanymi menu i ramkami iframe.

Zastosowałem indeks z 1000 do menu rozwijanych, ale element iframe zawierający wideo youtube nadal pojawia się nad menu. Przekonaj się poniżej (sprawdzić w menu „skróconych”):

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

nie mogę dowiedzieć się, dlaczego tak jest. Czy ktoś może mi pomóc? Oto CSS czy to pomaga:

#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

użyłbym osadzanie wideo youtube za pomocą znacznika <object> a nie iframe. Następnie użyłbym <param name="wmode" value="transparent"> wewnątrz <object>. Coś takiego:

<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

Na moim komputerze (Chrome na Windows 7) wtyczki wyświetlanie wideo w YouTube jest inny niż ojczysty okno zawartości okna przeglądarki. Wydaje mi się, że gdy wtyczka działa w ten sposób, renderuje się na jakiejkolwiek innej zawartości przeglądarki, ignorując wartości z-index CSS.

Wtyczka Silverlight ma ustawienie umożliwiające uruchamianie jej w oknie zawartości przeglądarki zamiast własnego okna macierzystego. Możesz spróbować znaleźć podobne ustawienie dla wbudowanego odtwarzacza YouTube.

Answer 3

Flash nie zawsze gra ładnie z indeksem Z we wszystkich przeglądarkach, wygląda dobrze z mojego firefox. http://manisheriar.com/blog/flash_objects_and_z_index < < Myślę, że to może być rozwiązanie, którego szukasz.

Edit

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie? < < podobny problem tutaj na stackoverflow

Answer 4

Jeśli chcesz zachować stosując metodę osadzania vids Youtube iframe, można po prostu ustawić wmode poprzez kwerendy zmiennej ?wmode=transparent. Oto przykład:

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

staną:

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

Pamiętaj, aby sprawdzić Youtube URL wszelkich zmiennych zapytania już obecnych. Jeśli już istnieje ?something... zmień ?wmode=transparent na &wmode=transparent i ustaw go na końcu.

Answer 5

Jeśli? Wmode = transparent nie działa, spróbuj zamiast tego przełączać na opaque. To działało w moim przypadku.

Próbka:

(function ($) { 
    $ = jQuery; 

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

Answer 6

To nie kwestia iframe z-index .Same problem wychodził mi wystarczy dodać wmode = przezroczyste dla YouTube osadzić i oprawić src URL. Podobnie jak:

<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