superposer un div opaque sur un iframe youtube

Question

Comment superposer un div avec une opacité semi-transparente sur une vidéo intégrée dans une iframe youtube ?

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

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

modifier (ajouter plus de précisions) : HTML5 se rapproche de nous, avec de plus en plus d'appareils qui l'utilisent à la place de flash, ce qui complique l'intégration des vidéos youtube, heureusement youtube fournit un iFrame spécial intégrable qui gère tous les problèmes de compatibilité de l'intégration des vidéos, mais maintenant la méthode qui fonctionnait auparavant, consistant à superposer un objet vidéo avec un div semi-transparent, n'est plus valide, je suis maintenant incapable d'ajouter un <param name="wmode" value="transparent"> à l'objet, car il s'agit maintenant d'une iFrame, alors comment puis-je ajouter un div opaque au-dessus de la vidéo intégrée à l'iframe ?

Answer 1

Informations sur le site officiel d'Adobe concernant ce problème

Le problème se pose lorsque vous intégrez un lien youtube :

https://www.youtube.com/embed/kRvL6K8SEgY

dans un iFrame, le mode par défaut est le mode fenêtré, ce qui lui donne un z-index supérieur à tout le reste et il se superpose à tout.

Essayez d'ajouter ce paramètre GET à votre URL :

wmode=opaque

comme ça :

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Assurez-vous que c'est le premier paramètre de l'URL. Les autres paramètres doivent être placés après

Dans la balise iframe :

Ejemplo:

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

Answer 2

Notez que la correction de wmode=transparent ne fonctionne que si elle est d'abord si

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Non

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Answer 3

Hmm... qu'est-ce qui est différent cette fois ? http://jsfiddle.net/fdsaP/2/

Le rendu est bon dans Chrome. Avez-vous besoin d'une solution multi-navigateurs ? Il est vraiment utile d'être précis.

EDIT : Youtube rend le object y embed sans wmode explicite, c'est-à-dire qu'il prend par défaut la valeur "fenêtre", ce qui signifie qu'il superpose tout . Vous devez soit :

a) Hébergez vous-même la page qui contient le code de l'objet/embed et ajoutez l'élément wmode="transparent" à l'objet et l'attribut à l'embed si vous choisissez de servir les deux éléments.

b) Trouver un moyen pour youtube de les spécifier.

Answer 4

J'ai passé une journée à jouer avec les CSS avant de trouver le conseil d'anataliocs. Ajouter wmode=transparent comme paramètre de l'URL de YouTube :

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Cela permet à l'iframe d'hériter du z-index de son conteneur, de sorte que votre opaque <div> se trouverait devant l'iframe.

Answer 5

Le recouvrement opaque a-t-il un but esthétique ?

Si c'est le cas, vous pouvez utiliser :

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

L'option "pointer-events : none" modifiera le comportement de la superposition afin qu'elle soit physiquement opaque. Bien sûr, cela ne fonctionnera que dans les bons navigateurs.