Cómo poner un vídeo de fondo

En esta ocasión vamos a ver cómo se puede poner un vídeo de fondo dentro de un contenedor en nuestro WordPress. Este efecto se utiliza mucho por ejemplo en los sliders de las páginas web, mezclando el vídeo que se ejecuta de fondo, con un texto a modo de información o también con una llamada a la acción.

En este caso vamos a utilizar un poco de HTML y CSS, huiremos de lo que hemos estado haciendo en semanas anteriores, en las que utilizábamos códigos en PHP más complejos. Además de utilizar un código mucho más sencillo, también será más sencillo insertarlo dentro de la página web y de la sección de esa página, donde queramos insertarlo.

Como siempre, vamos a ello.

Código HTML necesario para poner un vídeo de fondo

El código que vamos a utilizar para insertar este vídeo es muy sencillo, sobre todo si en alguna ocasión has insertado un mapa de Google Maps.

En nuestro caso vamos a utilizar este código:

Como puedes ver, este código es muy sencillo de crear, nos dice que se va a crear un <div> llamado contendor-para-el-video, que será el que almacene el vídeo. Este contenedor cargará el vídeo que se encuentra en nuestro WordPress, en la ruta: https://jose.josegonzalezbueno.com/wp-content/uploads/2019/10/video-a-mostrar.mp4. A continuación podremos poner un texto con un título y una descripción a modo explicativo del propio vídeo.

Nota
Evidentemente debes cambiar la ruta del vídeo que está en mi servidor, por la ruta de tu vídeo. Para saber cual es esa ruta, solo tienes que subirlo a la categoría Medios y copiar su url.

Código CSS necesario

A continuación te muestro un ejemplo de código CSS que puedes aplicarle al vídeo:

Este código CSS lo que hace es aplicarle al contenedor-para-el-video un tamaño del 100% de la pantalla y una altura de 600px. También si el vídeo se visualiza en pantallas menores de 600px, el desbordamiento (overflow) estará oculto, es decir, cortara el vídeo.

Además de esto, el texto que está formateado por la clase insertar-video, lo posicionaremos en el dentro vertical y horizontal con respecto al objeto contenedor-para-el-video, y también le daremos una alineación centrada a ese texto, con lo que tendremos este texto completamente centrado dentro del vídeo.

El resultado será el siguiente:

Nota
Para que la página no tarde en cargar, editaré el documento y eliminaré el vídeo, por lo que voy a dejar una captura de pantalla de cómo se vería este efecto.