Cómo crear un popup modal de video en Divi que se active al cargar la página sin plugins

por Oscar Viedma | Nov 28, 2024 | Tutorial gratuito

En este nuevo tutorial gratuito para mi canal de YouTube, te enseñaré cómo crear un popup modal de video en Divi que se active automáticamente al cargar la página, sin necesidad de usar plugins (ver demo).

Este tutorial surgió como respuesta a las solicitudes de varios suscriptores que querían implementar esta funcionalidad en sus proyectos. Me puse manos a la obra para crear una solución práctica y eficiente usando solo el Divi Builder y algunos fragmentos de código CSS y JavaScript.

¿En qué consiste el efecto?

La idea es que, al entrar a una página web creada con Divi, a los 3 segundos (este tiempo es configurable), se muestre un popup con un video incrustado. Este video puede ser de YouTube, Vimeo, o incluso un archivo cargado en la biblioteca de medios de WordPress. Para incrustarlo, utilizaremos el módulo video por defecto de Divi, lo que te permitirá aprovechar toda la personalización que ofrece este módulo.

Algunas características destacadas de este popup:

• Control de reproducción: Si el usuario cierra el popup mientras el video se está reproduciendo, este se pausará automáticamente.
• Opciones para cerrar: El modal se puede cerrar haciendo clic en un icono de «Cerrar», en el overlay, o incluso presionando la tecla ESC.

¿Solo sirve para videos?

¡No! Aunque este ejercicio está diseñado pensando en videos, puedes incrustar cualquier tipo de contenido en el popup. Por ejemplo: texto, imágenes, galerías, formularios o cualquier otro módulo de Divi. Las posibilidades son infinitas y dependerán de tu creatividad y necesidades.

Responsivo y adaptable

Como todos mis tutoriales, este popup es completamente responsive. Se adapta perfectamente a cualquier resolución de pantalla, asegurando una experiencia óptima tanto en dispositivos móviles como en escritorio.

¿Qué necesitas para este tutorial?

Para implementar esta funcionalidad, solo necesitarás agregar algunos fragmentos de código JavaScript que te comparto a continuación y seguir los pasos explicados en el video. ¡Es más fácil de lo que parece!
 
HTML para el botón de «cerrar modal»:

<button class="ov-close-button" onclick="closeModal()">×</button>

Estilos CSS Generales para el modal:

/* Estilos generales OV Modal Popup */
.ov-modal-overlay {
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

body .ov-modal-overlay.ov-active {
  visibility: visible !important;
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.ov-modal-content {
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.ov-modal-overlay.ov-active .ov-modal-content {
  transform: scale(1) !important;
  opacity: 1 !important;
}

.ov-modal-overlay.ov-closing {
  opacity: 0;
}

.ov-modal-overlay.ov-closing .ov-modal-content {
  transform: scale(0.7);
  opacity: 0;
}

.ov-close-button {
  position: absolute;
  top: -12px;
  right: -12px;
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.ov-close-button:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 980px) {
  .ov-close-button {
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
	}
}

Código JavaScript Funcionalidad Modal:

<script>
const modal = document.getElementById('ov-videoModal');
const mainArea = document.getElementById('et-main-area');
mainArea.after(modal);

function showModal() {
    modal.style.display = 'flex';
    void modal.offsetWidth;
    modal.classList.add('ov-active');
}

function closeModal() {
    modal.classList.add('ov-closing');
    modal.classList.remove('ov-active');
    
    setTimeout(() => {
        modal.classList.remove('ov-closing');
        modal.style.display = 'none';
        
        const iframes = modal.getElementsByTagName('iframe');
        for(let iframe of iframes) {
            if(iframe.src.includes('vimeo') && iframe.src.includes('autoplay=1')) {
                iframe.src = iframe.src.replace('autoplay=1', 'autoplay=0');
            } else if(iframe.src.includes('youtube.com')) {
                const videoBox = iframe.closest('.et_pb_video_box');
                if(videoBox && videoBox.nextElementSibling && videoBox.nextElementSibling.classList.contains('et_pb_video_overlay')) {
                    let currentSrc = iframe.src;
                    currentSrc = currentSrc.replace(/&?autoplay=1/, '');
                    iframe.src = currentSrc;
                    
                    videoBox.nextElementSibling.style.display = 'block';
                    videoBox.nextElementSibling.style.opacity = '1';
                } else {
                    const currentSrc = iframe.src;
                    iframe.src = currentSrc;
                }
            } else {
                const currentSrc = iframe.src;
                iframe.src = currentSrc;
            }
        }
    }, 300); 
}

setTimeout(showModal, 3000);

modal.addEventListener('click', function(e) {
    if (e.target === this) {
        closeModal();
    }
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModal();
    }
});
</script>

Espero que disfrutes este tutorial y que te ayude a llevar tus proyectos en Divi al siguiente nivel. Si tienes dudas o sugerencias, no olvides dejar tus comentarios. 😊