z-index et iFrames !

Question

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

Sur cette même page se trouve une vignette qui, lorsqu'elle est cliquée, fait apparaître l'image en FancyBox. Cependant, la vidéo YouTube intégrée se superpose toujours à l'image FancyBox. J'ai fait quelques expériences avec le z-index, mais sans succès.

Est-ce qu'une iFrame a l'ancienneté sur tous les éléments d'une page, même avec un z-index défini, etc.

Answer 1

Ajouter 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

Answer 2

En un mot, oui. Cependant, les vidéos Youtube sont en Flash. Le Flash a également l'ancienneté sur l'ordre Z. Il se superpose, qu'il soit dans un IFRAME ou non.

IFRAME et Flash sont des objets "lourds". Ils ont leurs propres objets de gestion de fenêtre (HWND dans Windows), et sont donc soit devant, soit derrière d'autres objets lourds.

div , span etc. sont "légers". C'est-à-dire que ce sont des objets dessinés, dessinés sur le corps (qui est un objet lourd), et gérés par le navigateur, et non 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 elles ne peuvent pas recouvrir des objets "réels" (ou ce que le gestionnaire de fenêtres considère comme réel).

Elles doivent être légères car elles épuiseraient rapidement le gestionnaire de fenêtre si chaque DIV et SPAN et A a dû réserver les ressources de l'OS.

Answer 3

Si vous souhaitez que l'applet Flash soit rendu selon les mêmes règles d'indexation 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", "window" pour un objet intégré dans une page web

Answer 4

C'est très simple, il suffit d'ajouter ces paramètres à l'url de votre 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 !

Answer 5

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

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

Je ne pense pas qu'il soit possible d'ajouter cette information à l'URL de l'iframe. Votre contenu doit donc comporter cette information, probablement entre les balises d'objet.