Vídeo como background en HTML5

Una de las cosas que podemos hacer con el elemento vídeo es poner un vídeo como background en HTML5. Es decir, que el fondo de nuestra página web sea un vídeo en vez de un color o una imagen de fondo. Veamos cómo podemos hacerlo.

Crear el elemento vídeo

Lo primero será poner el vídeo dentro de nuestra página. Para ello utilizaremos el elemento video:

<video id="mivideo" width="300" height="150">
  <source src="tecla.ogv" type="video/ogg">
</video>

El elemento source nos va a ayudar a indicar el origen y tipo del vídeo. En este caso podemos utilizar cualquier formato que esté soportado por los navegadores.

Arranque automático del vídeo

Como lo que queremos es que el usuario no interactue con el vídeo para arrancarlo o pararlo, lo que vamos a hacer es arrancarlo automáticamente mediante la propiedad autoplay

<video id="mivideo" autoplay="autoplay" width="300" height="150">
  <source src="tecla.ogv" type="video/ogg">
</video>

Ajustar el tamaño del vídeo

Hasta ahora lo que hemos conseguido es poner el vídeo dentro de nuestra página. Ahora vamos a pasar a ponerlo de fondo. Para ello vamos a manipular el estilo CSS del elemento vídeo.

video { ... }

En cuanto a las propiedades lo que haremos será indicar que el mínimo ancho y mínimo alto sean el 100% de la página. Y que a la vez el alto y ancho sean automáticos.

video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

Posicionar el vídeo

De momento hemos conseguido hacerlo más grande, pero solo en la parte de la página que no tiene contenido, y a nosotros nos interesa que ocupe todo. Así que lo que vamos a hacer es desplazar al vídeo hasta el centro de la página.

Para ello utilizo las propiedades top, left y transform:

video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Ajustar el z-index

Vaya, ahora no veo el texto, el vídeo tapa toda la página. Lo que nos quedará es poner el vídeo en el eje de coordenadas Z lo más alejado posible. Así que manipulamos el valor z-index y le damos un valor negativo alto.

video {
  z-index: -100;
}

También es bueno trabajar con la propiedad background-size y darle el valor de “cover” para que el vídeo ocupe todo el background.

Código CSS final

Finalmente, nuestro código de estilo del vídeo quedaría así:

video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -100;

  background-size: cover;
}

Ya habremos conseguido tener un vídeo como background en HTML5.