Poner un vídeo de fondo

Cómo poner un vídeo de fondo

Tiempo estimado de lectura: 9 minutos

 

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:

<div id="contenedor-para-el-video">
<video preload="auto" autoplay="autoplay" type="video/mp4" src="https://www.josegonzalezbueno.com/wp-content/uploads/2019/10/video-a-mostrar.mp4" loop=""></video>
<div class="contenido-del-video">
<h2>Título para nuestro vídeo</h2>
Este será el contenido que irá justo encima de nuestro vídeo. Es aconsejable que sea un texto explicativo o que tenga cierta referencia al vídeo que vamos a mostrar.
</div>
</div>

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://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:

#contenedor-para-el-video {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.contenido-del-video {
position: absolute;
top: 40%;
left: 50%;
width: 600px;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}

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:

Título para nuestro vídeo

Este será el contenido que irá justo encima de nuestro vídeo. Es aconsejable que sea un texto explicativo o que tenga cierta referencia al vídeo que vamos a mostrar.

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.

Resultado final de vídeo de fondo
Resultado final de vídeo de fondo


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

 

 

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *