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

Vidéo YouTube intégrée via iframe Vous ignorez le z-index ?

Dans une tentative de création d'un menu de navigation déroulant horizontal à plusieurs niveaux, un utilisateur a été confronté à un anomalie où le menu déroulant n'apparaissait pas au-dessus d'une vidéo YouTube intégrée dans Chrome et IE9 (alors qu'il fonctionnait dans Firefox). Le problème était limité à la vidéo YouTube elle-même, et non à la technique iframe utilisée.

Question 1 : Pourquoi cet écart ?

Même avec un z-index:-999 !important ; pour l'iframe, le menu déroulant restait masqué derrière la vidéo. Cela suggère une interférence CSS dans le code d'intégration YouTube.

Question 2 : Résoudre le problème avec wmode

Pour remédier à la situation, l'ajout de wmode au code d'intégration YouTube semble résoudre le problème. Plus précisément, les paramètres suivants peuvent être utilisés :

• &wmode=Opaque
• &wmode=transparent

La raison technique du fonctionnement de cette solution reste obscure. Cependant, l'exemple de code suivant illustre son implémentation :

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque"></iframe>

Alternativement, le code jQuery suivant peut être déployé pour résoudre le problème du z-index pour toutes les iframes d'une page :

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

En utilisant le paramètre wmode, le code d'intégration YouTube peut être personnalisé pour se comporter comme prévu, permettant au menu déroulant d'apparaître au-dessus de la vidéo intégrée dans tous les principaux navigateurs.

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!