z-index et iFrames!
j'utilise le FancyBox plugin pour certaines des images de mon site. Sur une de mes pages, j'ai aussi le code iFrame intégré de YouTube pour placer une vidéo sur la page.
sur cette même page est une vignette qui, lorsque cliqué, FancyBoxes l'image. Cependant, la vidéo Youtube intégrée se trouve toujours au-dessus de L'image de la FancyBox. J'ai fait un peu de z-index en expérimentant et toujours pas de chance.
une iFrame ont ancienneté sur tous les d'éléments dans une page, même avec les z-index, etc.?
6 réponses
ajouter wmode=transparent comme param.
solution Html
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(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
En un mot, oui. Cependant, les vidéos Youtube sont Flash. Flash a également l'ancienneté sur le Z-Ordre. Il se superposera qu'il soit dans une IFRAME ou non.
IFRAME et Flash sont des objets "heavyweight". Ils ont leurs propres objets de gestionnaire de fenêtres (HWND dans les fenêtres), donc ils sont soit en face d'autres objets lourds ou derrière eux.
div , span , etc sont "léger". C'est qu'ils sont les objets dessinés dessinés sur le Corps (qui est un objet lourd), et géré par le navigateur, pas le gestionnaire de fenêtres.
en ce qui concerne le gestionnaire de fenêtres de système d'exploitation est concerné, ils sont juste de jolies photos 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 parce qu'ils épuiseraient rapidement le gestionnaire de fenêtres si chaque DIV et SPAN et A devait réserver les ressources D'EO.
si vous voulez que L'applet Flash soit rendu selon les mêmes règles z-index de tout autre élément HTML, alors vous devez définir l'attribut WMODE pour le flash inclus.
voir:
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!
Hmm, le problème ici est que je n'ai pas le contrôle sur les éléments flash. Je suis essentiellement juste en train de tirer le HTML iframe intégré à partir du site youtube qui ne contient que les étiquettes. Donc je ne peux pas définir l'attribut WMODE.
réponse Tardive mais: oui, vous pouvez. Juste de la sellerie ?wmode=opaque sur l'url yt.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
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 y ait une façon d'ajouter ceci à L'URL iframe donc votre contenu doit avoir ceci, probablement entre les balises d'objet.