Una de las cosas más desesperantes cuando insertas un vídeo en una página de tu web es que este no se reproduzca automáticamente, especialmente si quieres que sea un vídeo de fondo, o sirva de animación de una sección.
Si utilizas el tema Divi, por algún motivo, no tienes manera de aplicar la reproducción automática a los vídeos que subes a tu servidor, ya que no existe ningún ajuste en el maquetador para ello.
En cualquier situación en la que insertes un vídeo mediante código siempre puedes aplicar parámetros de reproducción automática, como en un módulo de texto o de código, pero no hay ninguna opción para esto en el módulo de vídeo de Divi.
Afortunadamente hay un par de soluciones que, tras mucho probar scripts de todo tipo, incluso combinaciones de JavaScript y CSS, funcionan en todos los casos, que son las que vamos a ver en esta ocasión…
Índice de contenidos
No uses el módulo de vídeo de Divi
Lo primero que tienes que tener claro es que, si quieres reproducción automática de un vídeo, no utilices el módulo de vídeo de Divi. Si ya lo tenías añadido, simplemente quita el módulo, a continuación veremos cómo insertar tu vídeo, pero pudiendo aplicar la reproducción automática, y más parámetros si quieres.
Usa el vídeo de fondo de cualquier módulo de Divi
La primera posibilidad de poder mostrar tus vídeos en reproducción automática es usar la opción de vídeo de fondo, que por defecto funciona en reproducción automática, de cualquier módulo (separador, sección, texto, todos)
Los vídeos de fondo en Divi siempre se muestran en reproducción automática, da igual en qué módulo los añadas.
Usa el módulo de código de Divi
Si, por el motivo que sea, lo que necesitas es un vídeo que no vaya de fondo en ningún módulo, la opción que debes tomar es usar el módulo de código. Simplemente insértalo en la sección o columna donde quieras que se muestre el vídeo y añade lo siguiente:
<video width="100%" playsinline controls loop muted autoplay> <source src="https://midominio.com/wp-content/uploads/2023/04/mi-video.mp4" type="video/mp4"> </video>
En el código anterior debes sustituir la URL (src) de ejemplo por la del vídeo que quieras mostrar. Para saber la URL del vídeo, tras haberlo subido, en la biblioteca de medios tienes un botón para copiar la URL del mismo.
Una explicación rápida de los parámetros del código es la siguiente:
playsinline– se reproduce integrado en la web, especialmente en móviles, que tienden a abrirlos a pantalla completacontrols– evita que se muestren los controles (salvo que pases el cursor por encima)loop– se reproduce en buclemuted– se reproduce sin sonidoautoplay– se reproduce automáticamente, sin necesidad de clic
Puedes usarlos todos, o solo los que creas necesarios para tu vídeo.
¿Cual de los 2 métodos es mejor utilizar?
Es cierto que en realidad puedes usar cualquiera de los dos métodos (vídeo de fondo o código del vídeo) y funcionarán en cualquier parte, pero en mi opinión, salvo que realmente quieras que sea un vídeo de fondo, que delante de ese «fondo» haya otra cosa, es mejor utilizar el módulo de código por varios motivos:
- Te permite personalizar los parámetros de reproducción del vídeo.
- Se adapta automáticamente al espacio disponible (columna, sección, etc.)
- Puedes hacer carga diferida (lazy loading), aplazar su carga y demás optimizaciones que ofrecen los plugins de rendimiento, mientras que no siempre es posible con vídeos de fondo.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando, buen día!
Primero que todo, muchas gracias por tu gran contenido.
Soy uno de tus alumnos de SEO y quería preguntarte respecto al tema de la optimización.
Actualmente tengo:
+ Las optimizaciones del SiteTools
+ Las propias de Divi
+ Las de SG Optimizer
+ Uso Divi Engine asique tengo Divi Nitro
+ Todos incluyendote hablan de que Rocket es lo mejor
Estaría muy agradecido si me dijeras cual o cuales utilizar?
Hola Pablo 🙂
A ver, no hay una optimización perfecta, ni herramientas perfectas, para toda web, y cada vez menos. Si has echado un vistazo a las Core Web Vitals quizás te hayas dado cuenta de que las recomendaciones de experiencia de usuario tienen mucho que ver con el modo en que está diseñada la web, incluso organizados sus contenidos, no solo es una cuestión de velocidad de carga o TTFB.
Mi consejo, siempre, es que empieces desde cero, o sea, con lo mínimo posible y vayas valorando QUÉ LE FALTA a tus páginas (no solo la home, cada página tiene distintos requisitos de optimización) para ofrecer una gran experiencia de navegación.
En tu caso concreto, las optimizaciones de Site Tools son del servidor, así que ahí nada que decir, EN PRINCIPIO, tener activados todos los sistemas de caché (y digo «en principio» porque hay situaciones muy especiales, que no creo que se apliquen en tu caso, en que hay que desactivar alguno).
Luego, yo empezaría por DESACTIVAR todas las opciones de rendimiento de Divi, e ir probando en tus páginas más importantes cómo les afecta activar cada opción (para bien o para mal) y sus posibles ajustes.
Si detectas que algo le falta, entonces habría que complementar con otro plugin más especializado en optimizar, como SG Optimizer o WP Rocket, e ir probando con cada ajuste (algunos son coincidentes en varios de estos plugins, e incluso en las opciones de Divi) a ver cuál ofrece mejor resultado en tus páginas. Esto es tedioso pero importante, para no sobreoptimizar y para aprovechar lo mejor de cada plugin.
Luego, sin obsesionarte con tener un 100/100 (salvo que te dediques a ello y no tengas trabajo del tuyo, del que paga facturas), llega a un buen compromiso entre experiencia de usuario y tiempo que le dedicas a la optimización. Mi primera opción siempre es SG Optimizer si estás en SiteGround, y debes tenerlo siempre activo, aunque luego desactives todas las optimizaciones, aunque solo sea para aprovechar correctamente las cachés.
Mira, un ejemplo de todo esto que te cuento lo tienes en estas dos guías:
¿Funciona bien WP Rocket con el hosting de SiteGround?
¿Funciona bien WP Rocket con el hosting de SiteGround?