Pourquoi les iframes YouTube dans les menus déroulants s'affichent-elles différemment selon les navigateurs ?

Les vidéos YouTube intégrées dans des iframes négligent le z-index dans certains navigateurs

Les menus de navigation déroulants à plusieurs niveaux avec des vidéos YouTube intégrées en dessous via des iframes posent des problèmes de rendu sur certains sites Web. navigateurs. Alors que le menu déroulant apparaît au-dessus de la vidéo dans Firefox, seul un fragment reste visible dans Chrome et IE9.

Le coupable, étonnamment, n'est pas l'iframe, mais la vidéo YouTube elle-même. Lorsque vous ciblez l'iframe sur d'autres sites Web externes, le menu déroulant s'affiche correctement même dans IE. Cela indique un problème possible avec le code d'intégration de YouTube.

Les experts recommandent d'incorporer le paramètre wmode, qui a deux valeurs :

• Opaque
• transparent

Malgré une documentation limitée expliquant son effet, l'ajout de ce paramètre à l'URL de la vidéo, comme le montre l'exemple ci-dessous, résout le problème :

<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, un script jQuery peut également être utilisé pour modifier 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");
    });
});

Cette approche révoque avec succès la domination du z-index des vidéos YouTube, permettant aux menus déroulants et autres éléments de s'afficher correctement au-dessus d'eux.

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!