overlay opaque div over youtube iframe

108

¿Cómo puedo superponer un div con opacidad semitransparente sobre un video incrustado ifraube de youtube?overlay opaque div over youtube iframe

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

edición (añadido más aclaraciones): HTML5 se acerca a nosotros, con más y más dispositivos que lo utilizan en vez del flash, lo que complica la incorporación de vídeos de youtube, afortunadamente, youtube proporciona un iFrame incrustable especial que maneja todos los problemas de compatibilidad de incrustación de video, pero ahora el método anterior de superposición de un objeto de video con un div semitransparente ya no es válido, ahora no puedo agregar un <param name="wmode" value="transparent"> al objeto , porque ahora es un iFrame, entonces, ¿cómo puedo agregar un div opaco encima del video incrustado iframe?

Fuente

2010-09-29 Timo Huovinen

Parece que YouTube ha solucionado el problema por completo. –

Todavía puedo ver el problema en Chrome. – scribu

@scribu podría ser problemas de seguridad flash o me falta algo, probé en un servidor local. –

210

Information from the Official Adobe site about this issue

El problema es cuando incrusta un enlace de youtube:

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

en un iFrame, el embed predeterminada está en ventanas que esencialmente le da un índice z mayor que todo lo demás y lo hará superposición sobre cualquier cosa.

Try añadiendo este parámetro GET a la URL:

wmode = opaco

así:

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

Asegúrese de que su primer parámetro en la URL. Otros parámetros deben ir después de

En la etiqueta 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>

Fuente

2011-01-24 22:38:10 anataliocs

Eso debería ser wmode = opaco. – ybakos

Información de Adobe sobre el problema: [http://kb2.adobe.com/cps/155/tn_15523.html](http://kb2.adobe.com/cps/155/tn_15523.html). Para que conste. – Wacek

~~Hmm ... ¿qué es diferente esta vez? http://jsfiddle.net/fdsaP/2/~~

~~Renders in Chrome fine. ¿Lo necesitas entre navegadores? Realmente ayuda a ser específico.~~

EDITAR: Youtube hace que el object y embed con ningún conjunto embed explícita, lo que significa que por defecto es "ventana" que significa que se superpone a todo lo . Es necesario que sea:

a) Alojar la página que contiene el código objeto/embed mismo y añadir wmode = elemento de "transparente" parámetro de objetar y atribuir a incrustar si decide servir a ambos elementos

b) Encuentre la manera de que youtube especifique eso.

Fuente

2010-09-29 09:37:41

Sí, descubrí cuál era el problema, en Firefox y Chrome funciona con fondos normales, agregando que la opacidad lo hace brillar ... el tuyo también brilla. –

editó el ejemplo de iframe para ver el aspecto de la mina. http://jsfiddle.net/fdsaP/6/ –

Entonces ... ¿quieres que la opacidad se aplique al elemento object/embed dentro del iframe? –

¿Es la superposición opaca con fines estéticos?

Si es así, puede utilizar:

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

'puntero-eventos: ninguno' va a cambiar el comportamiento de superposición de modo que pueda ser físicamente opaco. Por supuesto, esto solo funcionará en buenos navegadores.

Fuente

2010-09-29 09:48:19 Chris

safari 4, chrome y firefox3.6 aún clics? –

¿No es ese wat lo que quieres? – Codebeef

Estoy tratando de poner el video incrustado de youtube detrás de un fondo opaco para fines completamente estéticos :) –

pasé un día de jugar con CSS antes de encontrar anataliocs punta. Añadir wmode=transparent como parámetro a la 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>

Esto permite que el iframe para heredar el índice z de su contenedor para que su opaca <div> sería frente al marco flotante.

Fuente

2011-02-06 22:50:37 user605723

Tenga en cuenta que el wmode = solución transparente sólo funciona si es primero para

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

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

Fuente

2011-03-01 22:11:15 Mike

gracias por la punta –

esta es la solución más simple ... de trabajo .. gracias +1 –

overlay opaque div over youtube iframe

Respuesta

Cuestiones relacionadas