Crear un vídeo de fondo con GeneratePress

GeneratePress es un tema popular de WordPress conocido por su flexibilidad, rendimiento y opciones de personalización.

Es un tema ligero y receptivo que es altamente personalizable y optimizado para la velocidad. Ofrece una base sólida para construir varios tipos de sitios web, incluyendo blogs, sitios de negocios, portafolios y más. Una de sus características clave es su modularidad, lo que te permite agregar o quitar funciones según sea necesario, manteniendo tu sitio ligero y eficiente.

En esta ocasión os muestro como colocar un vídeo de fondo con un texto o botón al frente mediante los bloques usando un poco de CSS personalizado y un fragmento de código HTML. Válido tanto para una página estática como cualquier otra parte de tu web.

1. Añadir un bloque de contenedor, luego añadir un bloque HTML personal en su interior con el HTML a continuación:

<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm"> 
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

Solo necesitamos añadir una fuente de vídeo al código. Ej:

<video loop muted autoplay playsinline poster="https://tuweb.net/wp-content/uploads/2023/04/mi_imagen.jpg" class="background-video">
    <source src="https://tuweb.net/wp-content/uploads/2018/02/video.mp4">
</video>

En este caso he añadido una imagen de fondo mientras se carga el vídeo «poster» y he añadido una dirección de video «source».

«Ver ejemplo»

En el HTML de arriba, están las siguientes opciones:

  • Loop: Esto hará que el vídeo este en bucle
  • Muted: Esto silenciará cualquier sonido que el video pueda tener
  • Vídeo: que comenzará a reproducirse tan pronto como la página se cargue
  • Playinline: Esto hará que el video se reproduzca en el móvil
  • Poster: Esta es la URL de una imagen de retroceso que mostrará mientras el vídeo se carga

2. Aplique el z-index exterior del bloque de contenedores a 1.

«Ver ejemplo»

3. Dale al bloque de Texto una clase CSS adicional: background-video-content

Aquí es útil para añadir un texto o un botón sobre el fondo de vídeo y suba una capa por delante.

«Ver ejemplo»

4. Agregamos el CSS al personalizador de WordPress

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Puedes ajustar el valor «opacity» a tu gusto para resaltar el texto en caso de añadirlo.

Con estos pasos ya tenemos nuestro video en bucle constante de fondo en nuestra página. Este método se puede aplicar a la versión gratuita, pero si deseas usar un gancho, por ejemplo Hero page, necesitaras ir a premium.

Más info:
https://docs.generatepress.com/article/background-video/
https://docs.generatepress.com/article/adding-a-background-video/

Rate this post
Suscribir
Notificar para
guest

0 Comments
Inline Feedbacks
View all comments