web-dev-qa-db-fra.com

z-index et iFrames!

J'utilise le plugin FancyBox pour certaines images de mon site. Sur l'une de mes pages, j'ai également le code iFrame intégré de YouTube pour placer une vidéo sur la page. 

Sur cette même page se trouve une miniature qui, une fois cliquée, permet à FancyBox de visualiser l’image. Cependant, la vidéo YouTube intégrée repose toujours sur l'image FancyBox. J'ai fait un peu d'expérimentation z-index et toujours pas de chance.

Un iFrame a-t-il de l'ancienneté sur tous les éléments d'une page même avec un ensemble z-index, etc.

htmliframez-index
33
cqde

Ajoutez wmode = transparent comme paramètre.

Solution html

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

solution jQuery: 

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

37
Simonini

En un mot, oui. Cependant les vidéos Youtube sont en Flash. Flash a également de l’ancienneté dans l’ordre Z. Il se superposera, que ce soit dans un IFRAME ou non. 

IFRAME et Flash sont des objets "lourds". Ils ont leurs propres objets de gestionnaire de fenêtres (HWND dans Windows), de sorte qu'ils se trouvent soit devant d'autres objets lourds, soit derrière eux.

div, span, etc sont "légers". C’est-à-dire qu’il s’agit d’objets dessinés, dessinés sur le corps (qui est un objet lourd) et gérés par le navigateur, pas par le gestionnaire de fenêtres. 

En ce qui concerne le gestionnaire de fenêtres du système d'exploitation, ce ne sont que de jolies images dessinées par le navigateur. C'est pourquoi ils ne peuvent pas superposer des objets "réels" (ou ce que le gestionnaire de fenêtres considère comme réel).

Ils doivent être légers, car ils épuiseraient rapidement le gestionnaire de fenêtres si chaque DIV et SPAN et A devait réserver des ressources de système d'exploitation.

13
Ben

C'est très simple, il suffit d'ajouter ces paramètres à votre URL iframe et c'est tout:

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

Bonne chance!

4
DomingoSL

Si vous souhaitez que l'applet Flash soit rendu conformément aux mêmes règles d'index z que tout autre élément HTML, vous devez définir l'attribut WMODE pour le flash inclus. 

Voir:

  1. http://www.communitymx.com/content/article.cfm?cid=E5141
  2. Différences entre l'utilisation de wmode = "transparent", "opaque" ou "fenêtre" pour un objet incorporé sur une page Web
4
DuckMaestro

Pour que cela fonctionne dans IE (au moins 7 et 8), vous devez ajouter ceci:

<param name="wmode" value="transparent" />

Je ne crois pas qu'il soit possible d'ajouter ceci à l'URL de l'iframe, votre contenu doit donc en contenir, probablement entre les balises d'objet.

0
Calydon

Hmm, le problème ici est que je n'ai pas le contrôle sur les éléments du flash. Je tire simplement le code HTML iFrame intégré du site youtube qui ne contient que les balises. Je ne peux donc pas définir l'attribut WMODE.

Réponse tardive mais: oui vous pouvez. Il suffit de coller? Wmode = opaque sur l'URL yt.

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
0
matt