Maison >interface Web >tutoriel CSS >Comment puis-je superposer un Div opaque sur un iFrame YouTube ?

Comment puis-je superposer un Div opaque sur un iFrame YouTube ?

DDD
DDDoriginal
2024-12-31 12:53:16522parcourir

How Can I Overlay an Opaque Div on a YouTube iFrame?

Superposition d'un div opaque sur YouTube iFrame

L'intégration de vidéos YouTube à l'aide d'iFrames présente un défi lorsque l'on tente de superposer un div transparent. Alors que les méthodes précédentes impliquant wmode="transparent" ne sont plus applicables aux iFrames, il existe une solution qui permet d'ajouter un div opaque.

La clé réside dans l'ajout du paramètre GET "wmode=opaque" à l'URL de YouTube. Ce paramètre demande à l'iFrame d'utiliser le mode opaque, ce qui entraîne un z-index inférieur à celui des autres éléments.

Pour appliquer cela au code fourni, mettez simplement à jour l'URL dans la balise iFrame comme suit :

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Notez que "wmode=opaque" doit être le premier paramètre de l'URL, suivi de tout autre paramètre. Une fois cette modification effectuée, le div avec ID "overlay" superposera avec succès la vidéo YouTube avec l'opacité souhaitée.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn