Vidéo YouTube intégrée via iframe Vous ignorez le z-index?

J'essaie d'implémenter 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 iframe. Si je survole l'un des éléments de navigation de niveau principal dans Firefox, le menu déroulant apparaît correctement en haut de la vidéo.

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

Le problème semble être lié à la vidéo YouTube, pas à l'iframe. Pour tester, j'ai dirigé l'iframe sur un autre site Web plutôt que sur 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, ce problème se produit-il toujours?

Y a-t-il un CSS interne inclus dans le code d'intégration YouTube qui remplace en quelque sorte les choses?

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

&wmode=Opaque

&wmode=transparent

Je ne trouve pas de raison technique pour laquelle cela fonctionne, ni beaucoup plus d'explications, mais jetez un œ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 ca

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

La réponse de Joshc était sur la bonne voie, mais j'ai trouvé que cela supprime totalement la ?rel=0chaîne de requête et la remplace par l' ?wmode=transparentélément - 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 l'avez pas fait à l'origine. Je ne veux pas que cela se produise.

J'ai changé le code pour que l' srcattribut de la vidéo intégrée soit analysé en premier, pour voir s'il y a déjà un point d'interrogation ?(car cela dénote la présence d'une chaîne de requête préexistante, qui pourrait être quelque chose comme ?rel=0mais pourrait en théorie être tout ce que YouTube choisira d'ajouter à l'avenir). S'il y a déjà une chaîne de requête, nous voulons la préserver, pas la détruire, car elle représente un paramètre choisi par quiconque a collé dans cette vidéo YouTube, et ils l'ont probablement choisi pour une raison!

Donc, s'il ?est trouvé, le wmode=transparentsera ajouté en utilisant le format: &mode=transparentpour le marquer simplement à la fin de la chaîne de requête préexistante.

Si aucun ?n'est trouvé, alors le code fonctionnera exactement de la même manière qu'à l'origine (dans l' article de toomanyairmiles ), en ajoutant simplement ?wmode=transparentune nouvelle chaîne de requête à l'URL.

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

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

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

Ajoutez simplement l'un de ces deux à 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>

J'ai le même problème sur YouTube iframe ne s'intègre que dans Internet Explorer.

L'index Z était totalement ignoré, ou la vidéo flash apparaissait simplement au plus haut indice possible.

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

Mon code d'intégration, directement depuis 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"
    })
});

Fondamentalement, 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 bit de remplacement au cas où il ?rel=0existe. Sinon, ?wmode=transparentcela ne fonctionnera pas.

Nous pouvons simplement ajouter ?wmode=transparentà la fin de l'URL YouTube. Cela indiquera à YouTube d'inclure la vidéo avec l'ensemble wmode. Ainsi, votre nouveau code d'intégration ressemblera à ceci: -

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

Seul celui-ci a fonctionné pour moi:

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

Je le charge dans le fichier Wordpress footer.php. Code trouvé dans le commentaire ici (merci Gerson)

wmode = opaque ou transparent au début de ma chaîne de requête n'a rien résolu. Ce problème pour moi ne se produit que sur Chrome, et même pas sur tous les ordinateurs. Juste un processeur. Cela se produit également dans les intégrations vimeo, et peut-être dans d'autres.

Ma solution consiste à attacher à l'événement `` montré '' et `` masqué '' des modaux d'amorçage que j'utilise, à ajouter une classe qui définit l'iframe à 1x1 pixels et à supprimer la classe lorsque le modal se ferme. On dirait que cela fonctionne et est simple à mettre en œuvre.

Les réponses ci-dessous n'ont pas vraiment fonctionné pour moi, j'ai eu un événement de clic sur le wrapper et c'est-à-dire 7,8,9,10 ignoré le z-index, donc mon correctif donnait à l'emballage une couleur d'arrière-plan et tout a tout d'un coup fonctionné . Bien qu'il soit supposé être transparent, j'ai donc défini le wrapper avec la couleur d'arrière-plan blanc, puis l'opacité 0,01, et maintenant cela fonctionne. J'ai aussi les fonctions ci-dessus, donc ça pourrait être une combinaison.

Je ne sais pas pourquoi ça marche, je suis juste content que ça marche.

Le code Javascript de BigJacko a fonctionné pour moi, mais dans mon cas, j'ai d'abord dû ajouter du code JQuery «noconflict». Voici la version révisée qui a fonctionné sur mon site:

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

Tout ce dont vous avez besoin sur l'iframe est:

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

et dans l'URL:

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