Video YouTube incorporato tramite iframe Ignorando z-index?

Sto cercando di implementare un menu di navigazione a discesa multilivello orizzontale. Immediatamente sotto (verticalmente) il menu, ho un video di YouTube incorporato tramite iframe. Se passo con il mouse su uno degli elementi di navigazione di livello principale in Firefox, il menu a discesa viene visualizzato correttamente nella parte superiore del video.

In Chrome e IE9, tuttavia, è visibile solo un frammento del menu a discesa nella piccola area di spazio che ho tra il menu e l'iframe. Il resto sembra essere dietro l'iframe.

Il problema sembra essere correlato al video di YouTube, non all'iframe. Per testare, ho indirizzato l'iframe su un altro sito Web anziché sul video e il menu a discesa ha funzionato bene, anche in IE.

• Domanda 1: WTF?
• Domanda 2: Perché, anche se esplicitamente inserisco un z-index:-999 !important; iframe, questo problema si verifica ancora?

Esistono alcuni CSS interni inclusi nel codice di incorporamento di YouTube che in qualche modo hanno la precedenza sulle cose?

Prova ad aggiungere wmode, sembra avere due parametri.

&wmode=Opaque

&wmode=transparent

Non riesco a trovare un motivo tecnico per cui funzioni, o molte più spiegazioni, ma dai un'occhiata a questa query .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

o questo

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

La risposta di Joshc era sulla buona strada, ma ho scoperto che elimina totalmente la ?rel=0stringa di querystring e la sostituisce con l' ?wmode=transparentelemento - che ha l'effetto di visualizzare l'elenco dei video suggeriti di YouTube alla fine della riproduzione, anche se in origine non lo hai fatto non voglio che questo accada.

Ho modificato il codice in modo che l' srcattributo del video incorporato venga scansionato per primo, per vedere se c'è già un punto interrogativo ?in esso (perché questo indica la presenza di una stringa di query preesistente, che potrebbe essere qualcosa di simile ?rel=0ma potrebbe in teoria essere qualsiasi cosa che YouTube scelga di aggiungere in futuro). Se c'è già una stringa di query, vogliamo preservarla, non distruggerla, perché rappresenta un'impostazione scelta da chiunque abbia incollato in questo video di YouTube e presumibilmente l'ha scelta per un motivo!

Quindi, se ?viene trovato, wmode=transparentverrà aggiunto utilizzando il formato: &mode=transparentper taggarlo alla fine della stringa di query preesistente.

Se non ?viene trovato, il codice funzionerà esattamente come in origine (nel post di toomanyairmiles ), aggiungendo ?wmode=transparentcome URL una nuova stringa di query.

Ora, indipendentemente da ciò che potrebbe essere o meno alla fine dell'URL di YouTube come una stringa di query già, viene preservato e i wmodeparametri richiesti vengono iniettati o aggiunti senza danni a ciò che c'era prima.

Ecco il codice da inserire nel tuo document.ready funzione:

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

Basta aggiungere uno di questi due all'URL src:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Ho lo stesso problema su YouTube iframe incorpora solo in Internet Explorer.

L'indice Z veniva ignorato totalmente, oppure il video flash appariva al massimo indice possibile.

Questo è quello che ho usato, adattando leggermente lo script jquery sopra.

Il mio codice di incorporamento, direttamente da YouTube ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

Il jQuery si è leggermente adattato dalla risposta sopra ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Fondamentalmente se non selezioni Mostra video suggeriti quando il video termina nelle impostazioni di incorporamento, hai un ?rel=0alla fine del tuo "src"URL. Quindi ho aggiunto il bit di sostituzione nel caso ?rel=0esista. Altrimenti ?wmode=transparentnon funzionerà.

Possiamo semplicemente aggiungere ?wmode=transparentalla fine dell'URL di YouTube. Questo dirà a YouTube di includere il video con il set wmode. Quindi il tuo nuovo codice di incorporamento sarà simile al seguente: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Solo questo ha funzionato per me:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

Lo carico nel file Wordpress footer.php. Codice trovato nel commento qui (grazie Gerson)

wmode = opaco o trasparente all'inizio della mia stringa di query non ha risolto nulla. Questo problema per me si verifica solo su Chrome e non su tutti i computer. Solo una cpu. Si verifica anche negli incorporamenti di vimeo, e possibilmente in altri.

La mia soluzione per collegarmi all'evento "mostrato" e "nascosto" delle modali bootstrap che sto usando, aggiungere una classe che imposta l'iframe su 1x1 pixel e rimuovere la classe quando il modale si chiude. Sembra che funzioni ed è semplice da implementare.

Le risposte non funzionavano davvero per me, avevo un evento click sul wrapper e cioè 7,8,9,10 ignorato l'indice z, quindi la mia correzione stava dando al wrapper un colore di sfondo e all'improvviso ha funzionato . Anche se si supponeva che fosse trasparente, così ho definito il wrapper con il colore di sfondo bianco, e quindi l'opacità 0,01, e ora funziona. Ho anche le funzioni sopra, quindi potrebbe essere una combinazione.

Non so perché funzioni, sono contento che lo faccia.

Il codice Javascript di BigJacko ha funzionato per me, ma nel mio caso ho dovuto prima aggiungere del codice "noconflict" di JQuery. Ecco la versione rivista che ha funzionato sul mio sito:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Tutto ciò che ti serve su iframe è:

...wmode="opaque"></iframe>

e nell'URL:

http://www.youtube.com/embed/123?wmode=transparent