web-dev-qa-db-fra.com

YouTube Video Embedded via iframe Ignorer 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 du niveau principal dans Firefox, le menu déroulant apparaît correctement au-dessus de la vidéo.

Dans Chrome et IE9, toutefois, seul un fragment de la liste déroulante est visible dans la petite région située 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 le 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 j’ai explicitement mis un z-index:-999 !important; sur l'iframe, ce problème persiste-t-il?

Existe-t-il des codes CSS internes que le code intégré YouTube inclut qui priment les choses?

cssiframeyoutube
128
user249493

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 regardez 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");
    });
});
243
toomanyairmiles

La réponse de Joshc était sur la bonne voie, mais j’ai trouvé qu’elle supprimait totalement la chaîne de requête ?rel=0 Et la remplaçait par l’élément ?wmode=transparent - ce qui a pour effet de l'affichage de la liste de vidéos suggérées sur YouTube à la fin de la lecture, même si vous ne le vouliez pas initialement.

J'ai modifié le code de sorte que l'attribut src de la vidéo intégrée soit numérisé en premier, afin de voir s'il contient déjà un point d'interrogation ? (Car cela indique la présence d'un fichier préexistant). chaîne de requête, qui peut-être peut être quelque chose comme ?rel=0 mais pourrait en théorie être quelque chose que YouTube choisira d'ajouter à l'avenir). S'il existe déjà une chaîne de requête, nous voulons la conserver, pas la détruire, car elle représente un paramètre choisi par celui qui a collé dans cette vidéo YouTube, et ils l'ont probablement choisie pour une raison!

Donc, si ? Est trouvé, le wmode=transparent Sera ajouté en utilisant le format suivant: &mode=transparent Pour le taguer à la fin de la chaîne de requête préexistante.

Si aucun ? N’est trouvé, le code fonctionnera exactement de la même manière qu’à l’origine (dans le message de toomanyairmiles), en ajoutant simplement ?wmode=transparent En tant que nouvelle chaîne de requête à l'URL.

Maintenant, indépendamment de ce qui peut ou peut ne pas être à la fin de l'URL YouTube en tant que chaîne de requête, elle est conservée et les paramètres requis wmode sont injectés ou ajoutés sans endommager ce qui était auparavant.

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

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

Ajoutez juste l’un de ces deux liens à 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>
6
Code.Town

J'ai le même problème sur YouTube si l'iframe n'intègre que dans Internet Explorer.

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

C’est ce que j’ai utilisé, en adaptant légèrement le script jQuery 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"
    })
});


Fondamentalement, si vous ne sélectionnez pas Afficher les vidéos suggérées à la fin de la vidéo 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ù ?rel=0 existe. Autrement ?wmode=transparent ne fonctionnera pas.


5
Joshc

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

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

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 footer.php Wordpress fichier. Code trouvé dans le commentaire ici (merci Gerson)

2
dragoeco

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
1
Sam Thompson

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

Ma solution consiste à attacher à l'événement 'shown' et 'hidden' de bootstrap modals que j'utilise, ajoutez une classe qui définit l'iframe sur 1x1 pixels et supprimez la classe lorsque le modal On dirait que cela fonctionne et est simple à mettre en œuvre.

1
Danny

Le code Javascript de BigJacko a fonctionné pour moi, mais dans mon cas, j'ai d'abord dû ajouter du code "non conflictuel" JQuery. 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>
1
cclay

Les réponses ne fonctionnaient pas vraiment pour moi, j'avais un événement click sur l'emballage et 7,8,9,10 ignoraient l'index z, donc mon correctif donnait à l'emballage une couleur d'arrière-plan qui fonctionnait soudainement . Bien que cela soit supposé être transparent, j'ai donc défini le wrapper avec la couleur de fond blanche, 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 le soit.

1
eduardo