Vidéo YouTube incorporée via iframe Ignorant z-index ?

Question

J'essaie de mettre en place un menu de navigation déroulant horizontal à plusieurs niveaux. Immédiatement en dessous (verticalement) du menu, j'ai une vidéo YouTube intégrée via un iframe. Si je passe la souris sur l'un des éléments de la navigation principale dans Firefox, le menu déroulant apparaît correctement. sur le dessus de la vidéo.

Dans Chrome et IE9, cependant, seule une petite partie de la liste déroulante est visible dans la petite zone d'espace que j'ai entre le menu et l'iframe. Le reste du menu semble être derrière l'iframe.

Le problème semble être lié à la vidéo YouTube, no l'iframe. Pour tester, j'ai orienté la iframe vers un autre site web plutôt que vers la vidéo, et le menu déroulant a bien fonctionné, même dans IE.

• Question 1 : WTF ?
• Question 2 : Pourquoi, même si je mets explicitement un z-index:-999 !important; sur l'iframe, le problème se pose-t-il toujours ?

Le code d'intégration de YouTube inclut-il une feuille de style en cascade interne qui prend le pas sur d'autres éléments ?

Answer 1

Essayez d'ajouter wmode, il semble avoir deux paramètres.

&wmode=Opaque

&wmode=transparent

Je ne peux pas trouver une raison technique pour laquelle cela fonctionne, ou beaucoup plus d'explication mais Jetez un coup d'œil à cette requête .

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

ou ceci

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

Answer 2

Joshc La réponse de l'auteur était la bonne, mais j'ai découvert qu'elle supprime totalement le fichier d'aide à l'écriture. ?rel=0 et la remplace par la chaîne de requête suivante ?wmode=transparent ce qui a pour effet d'afficher la liste des vidéos suggérées par YouTube à la fin de la lecture, même si vous ne le souhaitiez pas à l'origine.

J'ai modifié le code pour que le src de la vidéo intégrée est d'abord analysé, pour voir s'il y a un point d'interrogation. ? (parce que cela dénote la présence d'une chaîne de requête préexistante, qui puede être quelque chose comme ?rel=0 mais pourrait en théorie être n'importe quoi que YouTube choisirait d'ajouter dans le futur). S'il existe déjà une chaîne de requête, nous voulons la préserver, et non la détruire, car elle représente un paramètre choisi par la personne qui a collé cette vidéo YouTube, et elle l'a sans doute choisi pour une bonne raison !

Donc, si ? est trouvé, le wmode=transparent sera ajouté en utilisant le format : &mode=transparent pour simplement l'ajouter à la fin de la chaîne de requête préexistante.

Si non ? est trouvé, alors le code fonctionnera exactement de la même manière qu'à l'origine (en toomanyairmiles ), en ajoutant juste ?wmode=transparent comme une nouvelle chaîne de requête à l'URL.

Maintenant, indépendamment de ce qui peut ou non se trouver à la fin de l'URL de YouTube en tant que chaîne de requête, elle est préservée et la requête requise wmode les paramètres sont injectés ou ajoutés sans endommager ce qui était là avant.

Voici le code à insérer dans votre document.ready fonction :

$('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"
    });
  }
});

Answer 3

Il suffit d'ajouter l'un de ces deux éléments à l'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>

Answer 4

J'ai le même problème avec les images iframe de YouTube, mais seulement dans Internet Explorer.

L'index Z était totalement ignoré, ou la vidéo flash apparaissait simplement à l'index le plus élevé possible.

C'est ce que j'ai utilisé, en adaptant légèrement le jquery script ci-dessus.

Mon code d'intégration, directement de YouTube...

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

Le jQuery légèrement adapté de la réponse ci-dessus...

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

En fait, si vous ne sélectionnez pas Afficher les vidéos suggérées lorsque la vidéo se termine dans vos paramètres d'intégration, vous avez un ?rel=0 à la fin de votre "src" url. J'ai donc ajouté le remplacement au cas où ?rel=0 existe. Sinon, ?wmode=transparent ne fonctionnera pas.

Answer 5

Wmode=opaque ou transparent au début de ma chaîne de requête n'a rien résolu. Ce problème ne se produit que sur Chrome, et pas sur tous les ordinateurs. Un seul processeur. Il se produit dans les embeds vimeo ainsi, et peut-être d'autres.

Ma solution est d'attacher aux événements "shown" et "hidden" des modales bootstrap que j'utilise, d'ajouter une classe qui définit l'iframe à 1x1 pixels, et de supprimer la classe lorsque la modale se ferme. Cela semble fonctionner et être simple à mettre en œuvre.