Comment superposer une division semi-transparente sur une IFrame YouTube ?

Intégrer des div opaques sur des iFrames YouTube

La superposition d'un div semi-transparent sur une vidéo iframe YouTube peut poser un défi en raison de l'introduction de HTML5 et remplacement ultérieur des objets vidéo par des iFrames. La méthode standard d'ajout de transparence d'arrière-plan à l'aide du paramètre "wmode" n'est plus applicable.

Heureusement, YouTube propose une solution en permettant aux développeurs d'ajouter le paramètre "wmode=opaque" à l'URL de l'iframe. Ce paramètre attribue un z-index inférieur à l'iframe, lui permettant d'être superposé par d'autres éléments sur le page.

HTML

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

CSS

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

Explication :

• L'URL iframe inclut le paramètre "wmode=opaque", qui garantit que le L'iframe est superposée par le div.
• Le div est positionné à l'aide de la propriété "fixed" et s'étend sur tout l'écran ("haut : 0", "gauche : 0", "largeur : 100 %" et " height: 100%").
• Un arrière-plan semi-transparent est appliqué au div en utilisant "background: rgba(0, 0, 0, 0,8)". Ajustez les deuxième et troisième valeurs (0, 0) pour changer la couleur de la superposition.
• Le z-index du div est défini sur 50, ce qui le place au-dessus de l'iframe mais en dessous des autres contenus de la page .

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!