INTRO CON VIDEO PARA PAGINA WEB
Buenos dias,
Necesitaria saber como podria hacer para que apareciera un video centrado (que ya tengo echo) y de fondo mi pagina web,
Gracias,
Adrian
Editado
Necesitaria saber como podria hacer para que apareciera un video centrado (que ya tengo echo) y de fondo mi pagina web,
Gracias,
Adrian
Editado
0
Puntos
Puntos
2613
Visitas
Visitas
2
Resp
Resp
Por Adrian hace 98 meses
Principiante
Respuesta #1
No domino mucho el tema, pero pienso que usando un Z-index se podría hacer algo que quede bastante bien.
Esto como ejemplo :
Esto como ejemplo :
tuvideo { position: absolute; left: 0px; top: 0px; z-index: 10; }
0
Puntos
Puntos
Respuesta #2
Hola, yo uso una técnica que consiste de la siguiente manera:
HTML
CSS
Explico. La caja hará de contenedor. Tendrá un tamaño completo de la pantalla gracias a sus atributos top, bottom, left y right. Será de display table para que posteriormente el div de clase vertical haga el posicionamiento vertical centrado (o sea, se centre verticalmente), y dentro de éste iría el div que contiene al video, que con margin: auto, se centrará en el medio de la pantalla (usando display:table para que funcione).
El background en .caja es opcional. Se lo puedes quitar.
Importante: Cuando vayas a cerrar el video, debes cerrar el div caja. Porque es probable que nada te funcione ya que la capa caja está encima de todo. Para eso, basta con colocarle display:none;
Ejemplo Ilustrativo:
Solo que en tu caso aparecería el video en vez del cuadro blanco.
HTML
<div class="caja"> <div class="vertical"> <div class="video"> <video src="..."></video> </div> </div> </div>
CSS
.caja { position: fixed; display: table; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); // Efecto de oscurecimiento } .video { display: table; margin: auto; } .vertical { display: table-cell; vertical-align: middle; }
Explico. La caja hará de contenedor. Tendrá un tamaño completo de la pantalla gracias a sus atributos top, bottom, left y right. Será de display table para que posteriormente el div de clase vertical haga el posicionamiento vertical centrado (o sea, se centre verticalmente), y dentro de éste iría el div que contiene al video, que con margin: auto, se centrará en el medio de la pantalla (usando display:table para que funcione).
El background en .caja es opcional. Se lo puedes quitar.
Importante: Cuando vayas a cerrar el video, debes cerrar el div caja. Porque es probable que nada te funcione ya que la capa caja está encima de todo. Para eso, basta con colocarle display:none;
Ejemplo Ilustrativo:
Solo que en tu caso aparecería el video en vez del cuadro blanco.