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


130

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?


Pouvez-vous publier un lien - il est difficile de donner une réponse utile sans code.
toomanyairmiles

duplication possible de z-index et iFrames!
stephanfriedrich


pour tous ceux qui se demandent comment cela fonctionne en 2015, la <embed wmode="transparent" ...>section est tout ce dont vous avez besoin (au moins dans Firefox) et pas besoin de vous soucier de la configuration de wmode dans url's param' s ou iframes
RozzA

gardez à l'esprit que, pour une raison quelconque, il existe deux types différents de liens YouTube: youtube.com/v/video_id et youtube.com/embed/video_id . Le lien v ignore le z-index dans IE, mais l'intégration fonctionne correctement.
Anton Lyhin

Réponses:


243

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

6
(Je suis l'OP) Merci à tous! Je suis tombé sur une solution similaire sur manisheriar.com/blog/flash_objects_and_z_index La clé semble utiliser à la fois name = "wmode" value = "transparent" sur un <param> et wmode = "transparent" sur le <embed>. Comme je le soupçonnais, ce n'est pas un problème iframe. Cela semble être un problème avec Flash voulant (exigeant?) Le z-index le plus élevé à moins que vous ne l'obligiez à être transparent.
user249493

5
Si vous utilisez l'API JS iframe, un playerVar wmodefonctionne également bien qu'il ne soit pas documenté.
Richard M

1
J'ai intégré cela et ma fancybox ne fonctionne toujours pas dans ie7 / 8 et je reçois toujours la vidéo en haut. encompasscu.com.au/homeiswheretheheartis que puis-je faire
Dan

6
L'option? Wmode = transparent a fonctionné comme un charme pour moi. Je souhaite seulement être plus rapide pour trouver la bonne question à poser. 24 heures après avoir commencé à chercher, j'ai trouvé cette réponse. Merci d'avoir répondu et d'avoir posté la requête ci-dessus!
djmarquette

1
@Dan, voyez ma modification ... vous avez peut-être déjà une chaîne de requête dans votre code d'intégration YouTube. (comme? rel = 0 pour ne pas afficher les vidéos pertinentes). Si tel est le cas, utilisez & wmode = transparent (ou opaque - j'ai entendu dire que l'opaque utilise moins de ressources système, donc je l'utilise principalement, sauf si j'ai une raison de le rendre transparent).
Sean Kendle

28

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

Cela a fonctionné pour moi alors que la réponse acceptée n'a pas fonctionné (même après avoir corrigé le code). Merci pour le correctif instantané.
Tom

? démarre la chaîne de requête de paramètre et est le délimiteur. Des trucs basiques. Voir stackoverflow.com/questions/2667551/…
cdonner

2
Cela a résolu mon problème 10 secondes avant d'abandonner!
Malibur

1
Parfait! Je cherchais ça depuis des lustres!
Jeroen W

2
Ce n'est opaquepas Opaque(notez le cas)
Szymon Toda

6

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>

5

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.



2

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>

Cela a déjà été suggéré dans de nombreuses réponses ici, il n'est pas nécessaire de le répéter avec une autre réponse. Si vous avez quelque chose de nouveau à ajouter, veuillez le faire, sinon ne répétez pas simplement ce que d'autres ont déjà publié.
Shadow Wizard est l'oreille pour vous

2

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)


1

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.


1

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.


1

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>

1

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.