2011-02-10 10 views
7

Necesito configurar un sitio web con un video como fondo.Formas de configurar un video como 'imagen' de fondo

Podré utilizar z-index para posicionar otros elementos en la parte superior del video? ¿Hay una mejor alternativa?

+2

El nefasto "que" ... – xelco52

+0

¿No es correcto? soy español .. me preguntaron? : P –

+0

"Ellos" rara vez se utiliza a menos que esté claro quiénes son "ellos". Si dijeras: "Acabo de hablar con las personas a cargo, y me preguntaron ...", entonces eso habría sido correcto, ya que se entiende quiénes son "ellos", "las personas a cargo". No parece que seas malo en inglés, pero es un poco fuera de lo común ... una interpretación de no identificar quiénes "son" podría ser que desprecias tanto por "ellos" que ni siquiera quiere identificar quiénes son "ellos". – TimFoolery

Respuesta

6

Tome un vistazo a http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html

Si no desea usar YouTube, eche un vistazo al código fuente y estoy seguro de que podría aplicar el mismo efecto a un nuevo video flash.

+0

Eso es casi lo que quiero :) –

+0

Ver también bueno Plugin jQuery de la pregunta vinculada: http://georgepaterson.github.io/jquery-videobackground/ –

1

No puede aplicarlo como un fondo CSS (propiedad de fondo). Puede dar el efecto usando capas que se controlan a través de la propiedad z-index.

0

Si está utilizando el flash como método de reproducción de video, no - flash SIEMPRE está encima de cualquier cosa sin importar z-index, pero imagino que esto podría hacerse utilizando la nueva etiqueta HTML5 <video>.

De no ser así convertir a la imagen animada de una alta tasa de fotogramas y se establece como BG ...

+2

-1 "flash SIEMPRE está encima de todo" - incorrecto. Si usa wmode = transparent, puede colocar su flash en cualquier z-index y permitir el renderizado arriba o debajo del contenedor de flash. – Damp

+0

Ah, gracias por esto, no estaba al tanto, siempre me dijeron que flash ignoraría el índice Z. –

+0

Damp, ¿es posible que wmode = transparent cargue mucha CPU? –

3

Yo no lo he probado, pero se puede tratar de establecer el ancho/altura de <video> a 100% a continuación, utilizando z-index dejar que todo el elemento que otros se quedan en la parte superior de la misma ...

Editar: por ejemplo, para establecer el vídeo como fondo de página entera

<body style="height: 100%;width: 100%"> 
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;"> 
<video src="" width="100%" height="100%" autoplay> 
Your browser does not support the video tag. 
</video> 
</div> 
... rest of your site 
+0

+1

http://w3schools.com/html5/html5_video.asp Por ejemplo, no es compatible, pero puede usar ogg para Firefox y opera, MPEG4 para safari, Chrome acepta ambos – Marcx

0

Si usted no es adversa a la utilización de un plugin de jQuery: videoBG

Cuestiones relacionadas