En algún momento, he visto que en varios sitios web, como Twitter, Spotify, etcétera, han utilizado un vídeo como background, lo que le da un aspecto moderno y atractivo para los usuarios.
En este post voy a mostrar cómo conseguirlo haciendo uso de la etiqueta video de HTML 5 y un poco de CSS.

El contenido

Para este ejemplo he utilizado un contenido de lo más simple, haciendo uso del generador de Lore ipsum, dentro de la etiqueta article. Suponemos que nuestro sitio tendrá cierta información y que de fondo se reproducirá una secuencia.

    <article>
        <!-- a lot of Lorem ipsum -->
    </article>

El video

En un post anterior se habló de dicha etiqueta y cómo lidiar con el resto de navegadores, así como ofrecer subtítulos, conocer cuáles son los formatos soportados por un navegador en concreto e incluso cómo instalar los codecs necesarios para Windows Server 2008 R2.

Para este ejemplo tomaré el fragmento utilizado en el primero de ellos, aunque no sea precisamente un vídeo candidato para un background 🙂

    <video autoplay loop muted>
        <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
        <source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunny.theora.ogv" />
        <source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
    </video>

En el código anterior, además de añadir los diferentes formatos aceptados por los navegadores más populares, he añadido los atributos autoplay, para que el vídeo comience de manera automática, loop, con el objetivo de que vuelva a comenzar una vez finalice, y muted, para deshabilitar el sonido, en el caso de que lo tuviera (esta última opción quizás no sea necesaria, si por el contrario deseamos también que se escuche).

El CSS

Por último, necesitamos definir los estilos para que todo encaje correctamente. En el caso de la etiqueta article sólo he añadido unas cuantas propiedades para que quede centrado, tenga un color de fondo y unos márgenes adecuados:

article {
    width: 50%;
    margin: auto;
    margin-top: 50px;
    background-color: #fff;
    padding: 15px;
}

La magia realmente está incluida en las propiedades añadidas a la etiqueta video:

video {
    bottom: 0;
    right: 0;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    z-index: -1000;
}

En primer lugar, eliminamos cualquier espacio con las propiedades bottom y right y utilizamos la posición fixed para que nuestro vídeo acompañe al contenido, por si este fuera más alto que el vídeo en sí. Establecemos min-width y min-height al 100% para que el elemento ocupe el máximo posible y, lo más importante, establecemos un z-index a -1000 para que quede justamente por detrás, a modo de background 🙂

Para ver el resultado de este ejemplo, podéis acceder al siguiente enlace en JSFiddle.

Espero que sea de utilidad.

¡Saludos!