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
2551
Visitas
Visitas
2
Resp
Resp
Por adrian hace 9 años
Novice
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
Por 00katalin00 hace 9 años
Novice
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.
1
Puntos
Puntos
Por jose hace 9 años
Master