Problèmes d'intégration de vidéos YouTube et d'index z

Lors de l'intégration d'une vidéo YouTube à l'aide d'une iframe sous un menu de navigation déroulant à plusieurs niveaux, vous pouvez rencontrer problèmes où le menu déroulant apparaît derrière la vidéo dans Chrome et Internet Explorer. Lorsque vous survolez un élément de navigation principal, la liste déroulante doit apparaître en haut de la vidéo dans tous les navigateurs.

Question 1 : Pourquoi le menu déroulant apparaît-il derrière la vidéo YouTube dans Chrome et IE9 ?

Ce problème est lié à la vidéo YouTube elle-même, et non à l'iframe. Les intégrations YouTube incluent du CSS interne qui remplace d'autres paramètres CSS, y compris vos valeurs z-index.

Question 2 : Pourquoi la définition de z-index:-999 !important ; sur l'iframe pose toujours le problème ?

Le CSS de remplacement dans le code d'intégration YouTube est prioritaire sur tous les paramètres d'index z que vous appliquez à l'iframe.

Solution :

Pour résoudre ce problème, ajoutez le paramètre suivant à l'URL de la vidéo intégrée :

&wmode=Opaque

Ce paramètre permet à la vidéo de se fondre dans l'arrière-plan, permettant à d'autres éléments de la page d'apparaître par-dessus.

Notes supplémentaires :

• Vous pouvez également utiliser le paramètre wmode=transparent au lieu d'Opaque, bien que cela puisse entraîner des problèmes de transparence sur certains navigateurs.
• Vous pouvez également utiliser jQuery pour modifier l'URL de toutes les iframes de votre page avant leur chargement, comme indiqué dans l'extrait de code ci-dessous :

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