En este tutorial te mostramos cómo insertar videos de YouTube en Divi con parámetros personalizados, configuración de autoplay y otras opciones avanzadas en tu sitio web.
En este otro tutorial, nuestro profesor Jerry Castillo nos enseña cómo insertar transmisión de YouTube en vivo en tu sitio web con Divi.
Con este tutorial podrás personalizar la inserción de videos de YouTube en tu sitio con Divi: quitar el logo de YouTube, mostrar videos relacionados solo de tu canal, activar el autoplay al cargar la página y mucho más.
Puedes ver la demo acá: Ver DEMO
Módulo de video nativo de Divi vs. embed manual con iframe
Antes de entrar a los pasos, vale aclarar la diferencia entre las dos formas de insertar un video de YouTube en Divi:
| Característica | Módulo de video de Divi | Embed manual (iframe) |
|---|---|---|
| Facilidad de uso | Muy fácil (interfaz gráfica) | Requiere editar código |
| Autoplay | Limitado | ✅ Control total |
| Parámetros personalizados | ❌ No disponibles | ✅ Todos los parámetros |
| Modo privacidad (GDPR) | ❌ No disponible | ✅ youtube-nocookie.com |
| Control de marca YouTube | ❌ No | ✅ modestbranding=1 |
Para la mayoría de los casos donde solo necesitas mostrar un video, el módulo nativo de Divi es suficiente. Pero si necesitas control avanzado (autoplay, marca, privacidad GDPR), el embed manual con iframe es la solución correcta.
Paso 1: Busca el video de YouTube que quieras insertar
Lo primero que debes hacer es buscar el video que deseas insertar en tu sitio. Una vez que lo encuentres, haz clic en la opción "Compartir".
Al darle clic en compartir, aparecerán varias opciones. En este caso, haz clic en la opción "Incorporar" para que aparezca el código Embed que usarás para insertar el video de forma manual:
Una vez que le des clic en "Incorporar", aparecerá el código necesario para insertar el video:
Haz clic en "Copiar" y estás listo para ir a tu sitio.
Paso 2: Pega el video en un módulo de código o texto
Inserta un módulo de código o de texto en el lugar donde quieras que aparezca el video dentro de Divi. Pega el código que copiaste desde YouTube dentro del módulo:
Hasta este punto tendrás el video insertado en tu sitio, pero sin parámetros ni autoplay. Eso lo veremos en el siguiente paso.
Paso 3: Agrega los parámetros que quieras configurar
Los parámetros se añaden directamente en la URL del iframe de YouTube, después del ID del video. Aquí están los más importantes:
Referencia completa de parámetros de YouTube
Esta tabla incluye todos los parámetros más útiles para personalizar el embed de YouTube en Divi:
| Parámetro | Valor | Efecto |
|---|---|---|
| autoplay | 1 | Reproduce el video automáticamente al cargar |
| mute | 1 | Silencia el video (necesario para autoplay en Chrome) |
| rel | 0 | Muestra solo videos relacionados de tu canal al terminar |
| modestbranding | 1 | Quita el logo de YouTube en la barra inferior |
| controls | 0 | Oculta los controles del reproductor |
| loop | 1 | Repite el video en bucle |
| start | 30 | Empieza el video en el segundo indicado (ej: segundo 30) |
| end | 120 | Termina el video en el segundo indicado |
| cc_load_policy | 1 | Activa los subtítulos automáticamente |
El código embed con los parámetros más comunes quedaría así:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ID_DEL_VIDEO?modestbranding=1&rel=0&autoplay=1&mute=1"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>Nota: el parámetro autoplay=1 requiere mute=1 para funcionar en la mayoría de los navegadores modernos (Chrome, Edge, Firefox), ya que estos bloquean el autoplay con sonido por defecto.
Video responsive en Divi: cómo hacerlo funcionar bien en móvil
Un problema frecuente con los embeds de YouTube en Divi es que el iframe tiene un tamaño fijo (560x315) y no se adapta al ancho del dispositivo en móvil. Para hacerlo responsive, envuelve el iframe en un contenedor con CSS o usa este código directamente en el módulo de código de Divi:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe style="position:absolute; top:0; left:0; width:100%; height:100%;"
src="https://www.youtube.com/embed/ID_DEL_VIDEO?modestbranding=1&rel=0"
frameborder="0" allowfullscreen>
</iframe>
</div>El padding-bottom del 56.25% mantiene la proporción 16:9 del video en cualquier ancho de pantalla, lo que hace que el video se adapte perfectamente tanto en escritorio como en móvil.
Modo privacidad de YouTube (GDPR)
Si tu sitio tiene usuarios de la Unión Europea o necesitas cumplir con el GDPR, YouTube ofrece un dominio de privacidad mejorada que no almacena cookies de usuario a menos que el visitante haga clic en el video. Para usarlo, simplemente reemplaza youtube.com por youtube-nocookie.com en la URL del embed:
src="https://www.youtube-nocookie.com/embed/ID_DEL_VIDEO"Con esto reduces el riesgo legal relacionado con el almacenamiento de cookies de terceros sin consentimiento previo.
Optimizar el rendimiento: lazy loading y YouTube Lite
Cada iframe de YouTube que pones en tu sitio carga decenas de recursos externos (JS, CSS, tracking) desde los servidores de Google, incluso si el visitante nunca hace clic en el video. Esto puede afectar significativamente el LCP (Largest Contentful Paint) y el puntaje general de velocidad en PageSpeed Insights o GTmetrix.
Hay dos formas de mitigar esto en Divi:
1. Lazy loading nativo del navegador: agrega el atributo loading="lazy" al iframe. Los navegadores modernos no cargarán el iframe hasta que el usuario haga scroll hasta él:
<iframe loading="lazy" width="560" height="315"
src="https://www.youtube.com/embed/ID_DEL_VIDEO?modestbranding=1&rel=0"
frameborder="0" allowfullscreen></iframe>2. YouTube Lite (placeholder con thumbnail): en lugar de cargar el iframe de inmediato, muestra solo la miniatura del video y carga el iframe completo solo cuando el usuario haga clic en el botón de play. Esta técnica puede reducir el tiempo de carga inicial de la página entre 300ms y 1 segundo en conexiones lentas. Se implementa con la librería lite-youtube-embed o con el plugin gratuito WP YouTube Lyte para WordPress.
Si el rendimiento de tu sitio es una prioridad, combinando YouTube Lite con el modo youtube-nocookie.com logras lo mejor de los dos mundos: carga rápida y cumplimiento de privacidad. Puedes ver más sobre optimización de velocidad en nuestra guía de errores que arruinan la velocidad en Divi.
Si además de videos quieres transmitir en vivo desde tu sitio, mira cómo insertar una transmisión de YouTube en vivo en Divi. También puedes explorar Bunny Stream como alternativa de hosting de video si quieres salir de YouTube del todo.
Preguntas frecuentes
¿El autoplay de YouTube funciona sin silenciar el video?
En la mayoría de los navegadores modernos (Chrome, Firefox, Edge, Safari) el autoplay con sonido está bloqueado por política del navegador. Para que funcione de forma consistente, siempre debes añadir mute=1 junto con autoplay=1. El usuario puede activar el sonido manualmente haciendo clic en el icono de silencio del reproductor.
¿Puedo insertar un video de YouTube como fondo de una sección en Divi?
Divi tiene una opción nativa para esto en las opciones de fondo de sección: puedes elegir "Fondo de video" y pegar la URL de YouTube. Esta opción aplica el video como fondo decorativo con autoplay y mute automáticos. Si necesitas más control (parámetros específicos, inicio/fin), el embed manual en un módulo de código con el contenido superpuesto encima da mayor flexibilidad.
¿Qué pasa si YouTube cambia la API de embed y los parámetros dejan de funcionar?
YouTube mantiene una alta estabilidad en los parámetros de embed porque muchos sitios dependen de ellos. Los parámetros de la tabla anterior llevan años activos y siguen funcionando. Si en algún momento YouTube depreca alguno, lo anunciará en su documentación oficial de la API IFrame Player de YouTube Developers.
Conclusiones
Insertar un video de YouTube en Divi con parámetros y autoplay no es nada complicado: con unos pocos cambios en la URL del iframe tienes control total sobre la experiencia de reproducción. Recuerda siempre hacer responsive el embed con el contenedor CSS y considera el modo youtube-nocookie.com si tu audiencia está en Europa o si tienes un aviso de cookies activo en tu sitio.
Comentarios
9 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Hola, Jefferson, espero que te encuestres bien.
Utilicé los códigos pero obtuve un resultado diferente: no me muestra videos relacionados de mi cuenta ni de la de nadie (lo cual me parece fantástico), pero no se quita el logo de YouTube. ¿Tienes idea de por qué?
Gracias.
Abrazo
Leo
Que tal Leonardo, un gusto saludarte.
Vale indagando un poco sobre tu duda, hemos notado que según YouTube, ese código dejó de funcionar desde agosto 😞, puedes ver más detalles acá: https://developers.google.com/youtube/player_parameters?hl=es-419#release_notes_08_15_2023
Puedes ver más especifico la notificación de YT: https://snipboard.io/up4OEJ.jpg y https://snipboard.io/AzxFbL.jpg
Justo el código donde permite esconder el logo de YouTube, lo lamentamos.
es un dolor de cabeza esconder el logotipo . igual buena info bro saludos!
¡Si, Youtube ha cambiado los parámetros y ahora no permite hacer todo esto! Estaremos actualizando el tutorial.
Hola Jefferson, estoy intentando insertar un video de Youtube en la cabecera de una web, sin logo y sin las opciones de compartir, etc que muestra Youtube.
He probado el plugin YouTube WordPress Plugin by Embed Plus y me deja poner autoplay y un loop del video pero no me deja ocultar logo ni las opciones de compartir, etc.
Alguna solución?
Gracias
Que tal Esther, si los parámetros que compartimos en este tutorial no te han funcionado, entonces no creo que haya alguna alternativa, acá el problema es que Youtube cambió hace poco la manera en como manejaba estas configuraciones y ahora no permite ocultar todo el contenido de sus videos.
Buenos días @Jeffersonmald,
He hecho una prueba insertando el video desde Google Drive y ya no me aparecen funcionalidades de Youtube, pero siguen apareciendo los controles de reproducción, configuración, etc.
He leído que con Vimeo esto no pasa y te permiten alojar videos sin todos estos inconvenientes.
Igualmente, conoces alguna otra alternativa para no tener que cargar los videos en el propio hosting y sin este tipo de inconvenientes que presenta youtube, drive, etc?
Gracias
Que tal Esther, claro, vale, si quieres colocar el video de fondo de un video desde vimeo, acá puedes ver como hacer que funcione correctamente: https://uxdivi.com/tutoriales-premium/como-solucionar-media-error-formats-not-supported-de-un-video-de-vimeo-en-divi
Quizá este tutorial pueda mostrarte lo que necesitas.
Ahora solo queda convencer al cliente que pague la versión pro de vimeo : )
Muchas gracias, me ha servido el tutorial igualmente.
Saludos