Video popup en Divi sin plugins: cómo crearlo

La idea es simple pero potente: tienes una imagen en tu página y, al hacerle clic, se abre un reproductor de video en una ventana superpuesta (lightbox) sobre el resto del contenido. Lo logramos con unos pocos fragmentos de código, sin instalar ningún plugin adicional y, lo más importante, sin que el video se cargue junto con la página. El video solo se carga cuando el usuario le da play, lo que nos da una ganancia enorme en tiempo de carga del sitio.

Esa diferencia es clave y vale la pena entenderla bien antes de empezar. Cuando incrustas un video de YouTube o Vimeo directamente en una página (un embed normal), el navegador descarga el reproductor, los scripts del proveedor y parte de los recursos del video apenas el usuario entra a la página, aunque nunca lo reproduzca. Con la técnica de este tutorial eso no ocurre: lo único que carga es la imagen de portada. El reproductor real se invoca solo en el momento en que alguien hace clic en play. Y lo mejor es que puedes reutilizar exactamente la misma metodología para tantos popups como quieras dentro de tu sitio web.

Encontrarás los códigos para realizar el tutorial en la parte inferior de este post. Recuerda que debes estar logeado para ver el contenido restringido.

Una vez que finalicemos el tutorial, aprenderás a tener un resultado como este:

Prueba el resultado en nuestra demo live →

Por qué un video popup en lugar de un embed normal

Mucha gente incrusta videos directamente en sus páginas sin pensar en el costo de rendimiento que eso implica. Cada embed de YouTube o Vimeo carga un iframe completo con sus propios scripts, cookies de seguimiento y peticiones a servidores externos. Si tienes tres o cuatro videos en una misma página, el impacto en el tiempo de carga se multiplica y tus métricas de Core Web Vitals empiezan a sufrir. Es uno de los errores más comunes que veo en sitios hechos con Divi.

El enfoque del video popup resuelve esto de raíz. En lugar de cargar el reproductor desde el inicio, solo mostramos una imagen estática que funciona como portada. Esa imagen pesa una fracción de lo que pesaría el reproductor completo, y el navegador la procesa al instante. El usuario ve una miniatura atractiva con un botón de play, y solo cuando hace clic se dispara la carga del video real dentro del lightbox. Para el resto de los visitantes que no reproducen el video, el peso adicional es prácticamente cero.

Consejo: usa siempre como portada del popup la misma imagen que sirve de miniatura del video en YouTube o Vimeo, en formato rectangular (16:9). Así mantienes una coherencia visual entre lo que el usuario ve antes y después de hacer clic, y el efecto se siente mucho más pulido y profesional.

Cómo funciona la técnica por dentro

Antes de meter mano al código conviene entender qué hace cada pieza, porque así puedes adaptarla a tu gusto en lugar de copiar y pegar a ciegas. La técnica se apoya en Magnific Popup, una librería de lightbox liviana que ya viene incluida en Divi. No necesitas instalarla por separado: solo la invocamos con un pequeño fragmento de JavaScript.

El mecanismo es directo. Le asignamos a una imagen una clase CSS personalizada (la clase video_popup) y le agregamos como enlace la URL del video que queremos reproducir. El script de JavaScript detecta cualquier elemento con esa clase y, cuando el usuario hace clic, abre la URL enlazada dentro de un iframe en modo lightbox, con una transición suave de aparición. El CSS se encarga de la parte estética: el botón de play animado que muestra el texto "play" por defecto y cambia al ícono de reproducción al pasar el mouse, además del oscurecido del fondo y el escalado sutil de la imagen.

Lo elegante de esta arquitectura es que la clase y el enlace son lo único que define el comportamiento. Esto significa que puedes convertir cualquier imagen de tu sitio en un disparador de video popup con solo asignarle la clase y el enlace correctos, sin tocar el código de nuevo. Una vez que pegas el JavaScript y el CSS una sola vez, toda la lógica queda lista para usarse infinitas veces.

Ahora sí, manos a la obra. Los pasos completos con el código listo para copiar están en la sección premium de este post, justo aquí abajo.

Mira todos nuestros tutoriales de Snippets Premium en UXDIVI

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐