superposer un div opaque sur une iframe youtube

Comment superposer un div avec une opacité semi-transparente sur une vidéo intégrée 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;
}

edit (ajout de plus de précisions): HTML5 approche de nous, avec de plus en plus d'appareils qui l'utilisent à la place du flash, ce qui complique l'intégration de vidéos youtube, heureusement, youtube fournit un iFrame spécial intégrable qui gère tous les problèmes de compatibilité d'intégration vidéo, mais maintenant la méthode de superposition d'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'un iFrame, alors comment ajouter un div opaque au-dessus de la vidéo intégrée iframe?

Informations du site officiel d'Adobe sur ce problème

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

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

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

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

wmode = opaque

ainsi:

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

Assurez-vous que c'est le premier paramètre de l'URL. D'autres paramètres doivent aller après

Dans la balise iframe:

Exemple:

<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 le correctif wmode = transparent ne fonctionne que si c'est le premier

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

ne pas

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

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

Rendu dans Chrome bien. En avez-vous besoin pour plusieurs navigateurs? Cela aide vraiment à être précis.

EDIT : Youtube rend le objectet embedsans jeu de wmode explicite, ce qui signifie qu'il est par défaut "fenêtre", ce qui signifie qu'il recouvre tout . Vous devez soit:

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

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

J'ai passé une journée à jouer avec CSS avant de trouver une astuce anataliocs. Ajouter en wmode=transparenttant que paramètre à l'URL 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 afin que votre opaque <div>soit devant l'iframe.

La superposition opaque est-elle à des fins esthétiques?

Si tel 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;
}

'pointer-events: none' changera le comportement de la superposition afin qu'il puisse être physiquement opaque. Bien sûr, cela ne fonctionnera que dans les bons navigateurs.