Pourquoi mon menu déroulant apparaît-il derrière une vidéo YouTube dans Chrome et IE9 ?

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, le menu déroulant 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 z-index 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 ainsi à d'autres éléments de la page pour apparaître dessus.

Notes supplémentaires :

• Vous pouvez également utiliser le paramètre wmode=transparent au lieu d'Opaque, bien que cela puisse entraîner de la transparence problèmes 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");
    });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!