Video de fondo con HTML y CSS

En este pequeño tutorial te muestro como realizar el efecto de video de fondo con HTML y CSS para que lo utilices en tus proyectos web, perfecto para pantallas con poco contenido como pantallas de inicio de sesión, te muestro el codigo fuente en HTML y CSS.

Muchas veces en nuestros proyectos web tenemos pantallas con poco contenido donde se necesita un poco más de vida o movimiento.

Estas pantallas con poco contenido son perfectas para añadir un efecto de background con video, este fondo de video agrega un poco más de movimiento a estas paginas sencillas y por supuesto nos da un poco más de profesionalismo y diseño.

Por cierto, ¿Sabes como hacer animaciones con CSS?

Elemento video con HTML

Para hacer este efecto de video de fondo con HTML y CSS lo primero que necesitamos es añadir nuestro codigo HTML.

<div class="fullscreen-container">
    <video loop muted autoplay poster="dist/img/office.jpg" class="fullscreen-video">
        <source src="dist/video/office_960.mp4" type="video/mp4">
        <source src="dist/video/office_960.ogv" type="video/ogg">
    </video>
</div>

Como puedes ver es un componente video dentro de un div contenedor, cada uno con su determinada clase lo cual nos permitirá darle un estilo definido y deseado en este efecto.

El video en este caso esta en formato mp4 y ogg.

Ahora lo siguiente será darle el estilo deseado de video de fondo.

Estilo del video background con CSS

Para darle el estilo que lo convertirá en video de fondo necesitamos hacerlo full width, darle un z-index de -100 para que se coloque por detrás de cualquier elemento y por ultimo definir unas reglas para que se visualize correctamente.

.fullscreen-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-video {
    width: auto;
    height: 100%;
  }
}

Ahora con esto ya podemos apreciar nuestro video de fondo con HTML y CSS.