Integrar un video de Vimeo como fondo en una sección de Divi es una solución elegante y eficiente para lograr un diseño atractivo sin sacrificar tanto el rendimiento de tu web. Sin embargo, hacerlo correctamente requiere algunos pasos y ajustes técnicos que te voy a explicar de forma detallada, junto con consejos prácticos para optimizar la carga y evitar errores comunes.

Por qué no usar videos locales como fondo en Divi

Divi permite subir un video en formato .webm o .mp4 directamente desde la biblioteca de medios y asignarlo como fondo de una sección. Aunque esta es la forma más sencilla, tiene un problema importante: el peso del archivo.

Un video de solo 3 MB puede ralentizar tu página varios segundos, especialmente en móviles y conexiones lentas. Además, este peso se carga desde tu servidor, aumentando el consumo de ancho de banda.

💡 Consejo UXDivi: Si tu prioridad es la velocidad, evita videos como fondo. Si son imprescindibles, usa clips cortos de máximo 20-25 segundos y optimizados en peso.

Ventajas de usar Vimeo para videos de fondo

Cargar el video desde Vimeo en lugar de tu servidor ofrece varios beneficios:

• Entrega desde CDN: Vimeo distribuye el video desde servidores optimizados en todo el mundo.
• Menor impacto en tu hosting: El archivo no se guarda ni se sirve desde tu servidor.
• Optimización automática: Vimeo convierte y adapta el video a distintos formatos para mejor compatibilidad.

Problema al insertar un video de Vimeo en Divi

Si pegas la URL pública de Vimeo directamente en el campo de fondo de Divi, probablemente verás una miniatura inicial, pero, al recargar la página, aparece un error. Esto sucede porque Divi no reconoce la URL de reproducción de Vimeo como un archivo válido .mp4 o .webm.

Para que Divi acepte el video, necesitas una URL directa del archivo con una de esas extensiones.

Cómo obtener la URL correcta del video en Vimeo

1. Configura el video como público
   Si el video está privado o sin listar con restricciones de dominio, Divi no podrá reproducirlo. Asegúrate de que esté visible y con permiso de inserción en cualquier sitio.
2. Ve a la configuración avanzada de Vimeo
   • Abre el video en tu cuenta.
   • Accede a “Configuración” y luego a “Ajustes avanzados”.
   • Entra en la configuración antigua de Vimeo (opción disponible en avanzado).
3. Busca los vínculos del archivo de video
   • En la pestaña “Distribución” selecciona “Vínculos del archivo del vídeo”.
   • Vimeo mostrará varias opciones de descarga y reproducción en diferentes resoluciones.
   • Copia el enlace que termina en .mp4 o .webm (por ejemplo, ...file.mp4).
4. Inserta la URL en Divi
   • En Divi, ve a la sección → Fondo → Video.
   • Selecciona “Insertar desde URL”.
   • Pega la URL directa que copiaste de Vimeo.
   • Guarda y comprueba que el video se reproduce como fondo.

💡 Consejo UXDivi: Si quieres reducir aún más el peso, usa enlaces de 720p o 540p en lugar de 1080p.

Mejora de visibilidad: añadir un overlay oscuro con CSS

Los videos de fondo pueden dificultar la lectura de textos y botones. Divi no incluye un control nativo para oscurecer videos de fondo, pero puedes lograrlo con un poco de CSS en el pseudo-elemento ::before de la sección.

Ejemplo de CSS:

selector::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0,0,0,0.7); /* Ajusta opacidad aquí */
}

Luego, asegúrate de que el contenido de la sección tenga un z-index mayor (por ejemplo, 9999) para que quede por encima del overlay.

Resultados de rendimiento

Al usar Vimeo, la carga del video depende de su CDN, lo que reduce la presión sobre tu servidor y mejora el tiempo de respuesta inicial. Si bien un video siempre añade algo de peso, la diferencia entre servirlo localmente (3 MB extra) y desde Vimeo es considerable.

En pruebas con herramientas como GTMetrix, el tiempo de carga total baja varios segundos y el impacto en el tamaño de la página se reduce notablemente.

Cuándo usar y cuándo evitar videos de fondo

• Usar cuando aporten valor visual, generen impacto y no afecten de forma grave la experiencia de usuario.
• Evitar si la velocidad de carga es crítica, en sitios minimalistas o en proyectos con presupuesto de hosting muy limitado.

Si el cliente insiste en usar un video, esta técnica con Vimeo es la forma más optimizada y compatible de hacerlo.

Cursos recomendados para aprender más

En nuestros cursos puedes encontrar formaciones que te ayudarán a dominar estas técnicas:

• Curso de Optimización Web con Divi: donde tratamos estrategias para mejorar tiempos de carga y rendimiento.
• Mastery Total en Divi: para exprimir al máximo todas las opciones de diseño y funcionalidad.

Recomendaciones finales

• Comprime y optimiza tu video antes de subirlo a Vimeo.
• Usa clips cortos para minimizar el peso total.
• Comprueba siempre en móvil y tablet para asegurar una buena experiencia.
• Ajusta el overlay y contraste para garantizar legibilidad del contenido sobre el video.

Con estos pasos, tendrás un video de fondo en Divi usando Vimeo que luce profesional y se carga de forma más eficiente que con la opción local.