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?
<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 iframe
s