superposer un div opaque sur une iframe youtube


110

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?


1
Il semble que YouTube ait complètement résolu le problème.
Timo Huovinen le

1
Je peux toujours voir le problème dans Chrome.
scribu

@scribu cela peut être des problèmes de sécurité flash ou il me manque quelque chose, j'ai testé sur un serveur local.
Timo Huovinen le

Probablement. Quoi qu'il en soit, la solution d'anataliocs a fonctionné pour moi.
scribu

Pouvez-vous ajouter la balise youtube à cette question?
anataliocs

Réponses:


210

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>

1
Informations d'Adobe sur le problème: http://kb2.adobe.com/cps/155/tn_15523.html . Juste pour info.
Wacek

15

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

11

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.



Oui, j'ai découvert quel était le problème, dans Firefox et Chrome, cela fonctionne avec des arrière-plans normaux, l'ajout de l'opacité le fait briller ... le vôtre brille également.
Timo Huovinen le

édité l'exemple iframe pour qu'il ressemble à ce que le mien regarde. jsfiddle.net/fdsaP/6
Timo Huovinen

Alors ... vous voulez que l'opacité s'applique à l'objet / élément incorporé à l'intérieur de l'iframe?
meder omuraliev

oui, je n'ai pas remarqué que l'iframe était superposée car pour moi l'objet couvre l'intégralité de l'iframe, j'ai besoin que la vidéo soit couverte si possible, sinon je la remplacerai par un div noir de même largeur / hauteur et position.
Timo Huovinen le

@meder merci pour le lien et la solution! va l'essayer maintenant, mais le flash est toujours cliquable :)
Timo Huovinen

2

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.


0

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.


safari 4, chrome et firefox3.6 clique toujours sur ??
Timo Huovinen le

1
N'est-ce pas ce que tu veux?
Codebeef le

J'essaie de mettre la vidéo intégrée sur youtube derrière un fond opaque à des fins complètement esthétiques :)
Timo Huovinen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.