web-dev-qa-db-fra.com

superposer div div sur youtube iframe

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

<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 précisions): HTML5 nous approche, avec de plus en plus de périphériques qui l’utilisent à la place de la technologie flash, ce qui complique l’intégration de vidéos youtube. Heureusement, youtube fournit un iFrame intégrable spécial avec des la vidéo incorporant des problèmes de compatibilité, mais maintenant la méthode de superposition d'un objet vidéo avec une div semi-transparente qui fonctionnait auparavant n'est plus valide, je suis maintenant incapable d'ajouter un <param name="wmode" value="transparent"> à l’objet, car c’est maintenant une iFrame, alors comment puis-je ajouter une div opaque au-dessus de la vidéo intégrée iframe?

htmlcssiframeyoutubeoverlay
109
Timo Huovinen

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 mode par défaut wmode est fenêtré, ce qui lui donne essentiellement un indice z supérieur à tout le reste et il recouvre tout le reste.

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. Les 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>
211
anataliocs

Notez que le correctif wmode = transparent ne fonctionne que s'il en est ainsi

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

Ne pas

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

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

Render in Chrome c'est bien. Vous en avez besoin d'un navigateur multi-navigateurs? Cela aide vraiment d'être spécifique.

[~ # ~] éditer [~ # ~] : Youtube rend le object et embed sans mode explicite wmode set, ce qui signifie que "fenêtre" est la valeur par défaut, ce qui signifie que cela 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 à incorporer si vous choisissez de servir les deux éléments

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


10
meder omuraliev

J'ai passé une journée à jouer avec CSS avant de trouver un conseil pour anataliocs. Ajouter wmode=transparent en tant que paramètre de 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 de la z-index de son conteneur pour que votre opaque <div> serait devant l'iframe.

2
user605723

Le revêtement opaque est-il à des fins esthétiques?

Si oui, 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 pour qu'il soit physiquement opaque. Bien sûr, cela ne fonctionnera que dans les bons navigateurs.

0
Chris