Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
0
Puntos
2
Resp
432
Visitas
Por Adrian hace 23 meses
Principiante offline

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 :
tuvideo {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}
0
Puntos
Por 00katalin00 hace 23 meses
Principiante offline Sitio web

Respuesta #2

Hola, yo uso una técnica que consiste de la siguiente manera:

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
Por Jose hace 23 meses
Experto offline Sitio web

Relaccionados

Para comentar Inicia sesión o Registrate