Divi es un excelente constructor visual que sirve para diseñar prácticamente cualquier sitio web, podríamos decir que el límite es nuestra imaginación, aunque en algunas ocasiones necesitamos crear funcionalidades muy especificas en nuestro sitio, por lo tanto, es aquí cuando recurrimos a plugins de terceros o ha escribir un poco de código.
En este tutorial te mostraré y enseñaré cómo abrir un video de YouTube en una ventana emergente (lightbox o PopUp) al hacer click en un botón. Esto lo haremos con un poco de código, no tienes porque preocuparte, lo he hecho demasiado fácil para ti que solo tienes que copiar y pegar.
Código jQuery para activar el Pop Up:
<script type="text/javascript">
(function($){
$(document).ready(function() {
//$( '#nombreID a' ).addClass('popup-video');
$('.popup-video').magnificPopup({
disableOn: 100,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
})(jQuery)
</script>Clase CSS para cambiar el tamaño del video:
.mfp-iframe-holder .mfp-content {
max-width: 1400px !important;
}Clase CSS para cambiar el color de fondo de la ventana emergente:
.mfp-bg {
background: #673ab7;
}<script src="/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js" async></script> <link rel="stylesheet" href="wp-content/themes/Divi/includes/builder/styles/magnific_popup.css"/>
En caso de querer hacer lo mismo pero en vez de con un video del youtube, con una imagen… ¿Cómo lo hago? Gracias
Hola Alba, para abrir una imagen lo puedes hacer por defecto con el módulo de imagen que viene con divi por defecto. No necesitas más que eso. 🙂
Yo quiero pinchar en una imagen y que me salte un popup de un video.
E
Hola José, es posible. Solamente sigue los mismos pasos pero con un módulo imagen.
Por cierto, no olvides tener esta configuración en divi performance y agregar las siguientes rutas arriba del Código jQuery para activar el Pop Up:
Hola Oscar, tengo la última actualización de wordpress ya puse la configuracion como en la imagen y el codigo pero aun asi no funciona.
Hola Hector, perdona! jeje ¿Si lo lograste?
como hago para que salga un formulario de contacto
Hola Yulino ya es algo más avanzado, no tengo un tutorial todavía para realizar algo así.
Pero puedes buscar un plugin de lightbox o pop up html o iframe. Posteriormente solamente pegas un código corto de formulario dentro del lightbox. Para generar shortcode de secciones de divi existe estos plugins (gratis y de pago):
https://wordpress.org/plugins/simple-divi-shortcode/
https://divicake.com/products/divi-shortcodes/
Esta bien pero no funciona en version de celulares dado que simplemente no aparece.
Por favor corregir este inconveniente.
Hola Diego.
En este sitio en la página de inicio estoy usando un video con modal, tal como lo hacemos en este tutorial y funciona perfecto en celulares. ¿Qué es lo que te aparece a ti?
Hola Óscar, realmente me ayudó bastante este tutorial. Pero tengo una duda, también quise usarlo para abrir otra página como popup, en desktop va todo super bien, pero en el celular se ve mal. ¿Qué podría hacer para que se vea bien en todos los dispositivos?
¡Gracias de antemano!
Hola Miguel, ¿otra página como pop up? ¿Te refieres a usar el pop up de video también en otra página? ¿Qué es lo que se ve mal en celular? ¿La página o el video?
Hola Oscar, lo que estaba intentado es abrir un enlace hacia otra página web pero como pop up. En caso del desktop, hago click en el botón y aparece la otra web como pop up, pero al momento de verlo en celular se ve demasiado pequeño.
Hola veo que en el articulo no está el ejemplo, como lo tiene en el video?,
Igualmente se agradece este pop up. Saludos
Hola Pedro, no tengo la demostración en vivo amigo. Pero en la página inicio yo mismo he implementado este ejercicio. Si haces click en la imagen se te abre el video en pop up. 🙂
Muy buen aporte. Gracias por compartirlo.
Un abrazo Clara 🙂
Hola me gustaria cambiar la transparencia pero no lo logro con opacity, me podrias ayudar=
Hola Victor pruba colocando este CSS:
.mfp-fade.mfp-bg.mfp-ready {
opacity: .8!important;
}
*El valor de opacity deben ser de 0 a 1.
Amigo, muchas gracias..
Cómo hago para activar el video al cargar la página?
Saludos!!
Amigo, Google Chrome no permite esa funcionalidad porqué la considera mala práctica. Antes al hacer click se reproducía el video, ahora se ha desactivado el autoplay al abrir el pop up 🙁
Hola Oscar, muchas gracias por el artículo!
Siguiendo este post y el ejemplo de tu home, he creado una página con 60 vídeos de YouTube. He creado 20 filas y 3 (vídeos) módulos de vídeo por fila. De momento no he añadido el código para que se abran en una ventana emergente porque me he encontrado con el problema de que la página tarda mucho tiempo en cargarse (1 minuto apróx.) y claro, esto no es viable.
¿Podrías orientarme por qué pude ser que tarde tanto en cargarse o alguna solución que puedas proponer?
Muchas gracias de antemano!
Hola Valen, por una parte es lógico que tarde mucho en cargarse porque son demasiados videos. Yo lo que haría es crear una custom post type para subir los videos, y haría una página dinámica para que estos se vayan publicando, si eres principiante en WP y Divi puede ser un tanto complejo, pero es lo ideal para que los videos salgan con paginación y de esta manera ya no tienes que estar cargando 60 videos por página, con una paginación puedes mostrar de 10 en 10 y eso ayudaría mucho el proceso de carga. Yo hice algo parecido en mi proyecto anterior, puedes verlo aquí: https://ovmuse.com/tutoriales/
Muchas gracias por tu respuesta Oscar. De todas formas, los vídeos los cargo con el módulo de vídeo, pegando la url de YouTube. Osea que no los cargo subiendo los archivos de vídeo en la biblioteca, sino pegando la url… Entonces lo de crear CPT para subir los vídeos no sé si tiene mucho sentido, no?
Voy a investigar lo que me dices de crear una página dinámica con paginación 😉
Gracias!
Valen, lo qué pasa que al llamar un iframe de youtube la página va a tardar más en cargar porque está haciendo una llamado externo. Otra solución podría ser que instales un plugin como Lazy Load que te servirá para que los iframes vayan cargando como te vayas desplazando por la página, de ésta manera no cargas todos los iframes de una, sino conforme vayas haciendo scroll los iframe se irán cargando, esto ayudará a los tiempos de carga de tu sitio.
Hola Oscar! Ya me he beneficiado de tu tutorial en dos sitios que he desarrollado y me ha funcionado de maravilla. De verdad muchas gracias por este tutorial.
Tengo una consulta. Ahora mismo estoy intentando utilizar el popup en todo un «div», pero no he tenido éxito. ¿Será eso posible o solo funciona con imágenes y enlaces?
Muchas gracias y gracias por seguir agregando valor!
Hola Darío, que genial que te están resultando útiles los tutoriales. 🙂
¿Quieres hacer click en el div y que te abra el pop up? Si es eso debes seguir la misma lógica. O ¿quieres incrustar un div en un pop up? Si es esto segundo, hay un plugin para crear pop up con diseños realizados con divi builder: Aquí lo tienes.
En realidad es lo primero. Tengo este módulo de Texto al cual coloqué el enlace y también la clase CSS pero no funcionó. Es decir, en el botón que ves en el ejemplo funciona perfectamente. Pero en el fondo no está funcionando (aunque todo el módulo está enlazado al video de youtube con la clase CSS)
Te mando la imágen: http://prntscr.com/s6fifk
y el enlace de la web en cuestión: https://cirugiaplasticarospigliosi.com/
Saludos y gracias por la pronta respuesta. Muy buen blog nuevamente.
Hola Dario, entonces funciona correctamente haciendo click en el botón de play solamente, pero lo que quieres es que funcione haciendo click en el módulo texto. En este caso no sé puede porque divi a los módulos les inserta los enlaces también mediante javascript, es decir, no existe un elemento «a» por lo tanto hay un conflicto y no funciona 🙁
Voy a buscar una solución o alternativa, si lo logro te la comparto. Un abrazo
Genial! Gracias por compartir la respuesta. Seguiré recomendando OV Divi! Muchos éxitos!
Hola Oscar muy bueno tu tutorial…no se si es un problema pero sale un error cuando pongo la url de mi video de youtube y al darle click a la imagen o al boton no deja ver el video..
Hola Jhon, seguramente hiciste mal un paso o la url del video la estás copiando mal. Copiala de la barra de direcciones de youtube 😉
Hola, a mi me pasa lo mismo y no me funciona. Ya intenté de varias maneras revisar y me dice que youtube no muestra y bloquea el contenido.
En la primera imagen de mi página, que dice satsang.
Hola Eugenio, lamento el inconveniente. He entrado a tu sitio pero no encuentro dónde tienes el video. Lamento responder hasta ahora.
Un abrazo.
Hola, perdón que no lo puse. Ve a la siguiente página, en la primera imagen. Mi idea es en una página poner 4-5 vídeos con lightbox. Me gustaría que no alentaran mi página, y si hay manera que el video solamente se cargue cuando las personas le den click a la imagen.
A mi me pasa lo mismo, revisando paso a paso para ver si me había equivocado en algo o había introducido mal la url del video lo hice varias veces y todo esta tal cual. hay alguna solución?
Hola Martin, la estructura de la url debe ser así: https://www.youtube.com/watch?v=UXchTdYwwuI&t=162s
how can Add autoplay video for youtube in Code ?
Hi Omar, the only thing you have to do is put the url of the video. Example: https://www.youtube.com/watch?v=v97liH6Hfks
but the video no autoplay when the popup open?
The problem is that some browsers block autoplay. Previously, automatic playback was allowed, but now in some browsers it is not 🙁
Hola Valen,
Gran tutorial, te felicito.
Tengo 2 necesidades mas para este lightbox:
1. ¿como puede el video reproducirse de forma automatica cuando se abre y que se quede en bucle?
2. ¿como puedo quitar las recomendaciones del final de video de youtube y vimeo?
Estoy justo en un proyecto y es muy urgente.
Te agradezco mucho Valen.
un abrazo
Hola Luis muchas gracias.
1. Los navegadores restringen la reproducción automática debido a la <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" rel="noopener" target="_blank">política de google</a> (anteriormente si se podía). Voy a investigar sobre una alternativa para lograr la reproducción automática.
2.Te recomiendo tu video sea de vimeo y desde el mismo vimeo puedes configurar los elementos que deseas mostrar en el video.
Hola Luis, para personalizar los iframes de youtube son muy utiles lo parámtros de la API (https://developers.google.com/youtube/player_parameters#Parameters). Para utilizarlos, al final de la url del video (ésta debe incluir el término "/embed/") agrega "&" y vas colocando los parametros que se alineen con tus necesidades 🙂
Ahora bien… Una consulta para Oscar Viedma es: ¿Cómo podemos modificar el código de este post para que en lugar de poner el link del video, poder poner la url para embeber que da Youtube?
Por ejemplo, la url de mi video es: https://www.youtube.com/watch?v=O3TQ9M2hH20 pero para que los parámetros puedan funcionar, deberia usar la url: https://www.youtube.com/embed/O3TQ9M2hH20
Hola Francisco qué tal, gracias por la respuesta a Luis.
Este pop up está básado en la librería Magnific Popup, si quieres lograr incrustar un iframe debes realizar algunas modificaciones en el código. Mira aquí tienes la documentación oficial (https://dimsemenov.com/plugins/magnific-popup/documentation.html) allí explican lo que tienes que hacer para que el embed funcione.
Cordial saludo. Cómo hago para que en vez de video, en una ventana emergente aparezca el reproductor de audio de una estación de radio. Podrías indicarme, por favor, cómo hacerlo?
Hola Jose qué tal. La verdad nunca lo he intentado, no sé si la plataforma de radio te de un código para insertarlo en tu sitio web y sí es así que tipo de código es para ver como implementarlo en el pop up
Hola, cuando lo hago me arroja el siguinte error: Se produjo un error. Vuelve a intentarlo más tarde (ID de reproducción: NxOQw-t3NYdinZ3v).
Más información
si me puedes ayudar te lo agradecería mucho saludos!
Hola Luis qué tal, seguramente se debe a la estructura de la url, revisa que tenga esta estructura: https://www.youtube.com/watch?v=v97liH6Hfks
Como hago para que se muestre la galería del producto dando clic al botón??
Tendría que hacerse de otro manera con un código diferente.
Hola, una duda. El link en vez de ser de YT, es un link interno de la bliblioteca medios (un vídeo) cómo puedo hacer para que ese vídeo aparezca sólo y no en la entrada al estilo blog?
Gracias y saludos!
Hola Ángel, ¿Probaste copiando el link del video desde la biblioteca de medios?
Hola! Muchas gracias por tan buen video. No logro que al clicar la imagen aparezca el video. Creo que es porque estoy trabajando en wordpress y el código no queda bien colocado.
Cómo hago para pegar ese código en wordpress y que funcione bien?
Ahora hago click y se queda allí sin hacer nada.
Mil gracias por la ayuda,
Diana.
Hola Diana, ¿en tu caso no estás usando divi? Este tutorial está adaptado a divi.
Buenas tardes Oscar, funciona muy bien pero me queda una duda …cómo lo hago para que al terminar el video no aparezcan videos relacionados a otro canal de youtube? tengo entendido que siempre saldrán videos y que ahora ?rel=0 permite que se muestren los de mi canal pero no funciona a pesar de que lo agregué en el enlace del botón
Hola Claudia, la verdad ese tema ya es de youtube, lamentablemente youtube cambia constantemente y no sé si hoy en día se puedan ocultar los videos relacionados que aparecen cuando finaliza el video. 🙁
Podrías considerar Vimeo 🙂
Hola oscar, como hago en caso de yo quiero que el popup se vea en toda la web, excluyendo algunas paginas y que esta ze active al hacer scroll o a cierto tiempo de ingresar a la pagina , sin necesidad de crear un CTA o activador para que se active ?
Hola Auricel si quieres que se muestre en toda la web o páginas especificas deberías aplicarlo a través de un plantilla desde generador de temas, esta plantilla se la asignas a las páginas dónde quieras mostrar el pop up.
Para que se muestre al hacer scroll en la página intenta reemplazar el código para activar el pop up por este otro:
<script> jQuery(document).ready(function( $ ) { $(window).scroll(function(){ var scroll = jQuery(window).scrollTop(); if (scroll >= 200) { $('.popup-video').magnificPopup({ disableOn: 100, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); } }); }); </script>*Reemplaza 200 por la cantidad de pixeles que necesitas que haga scroll el usuario para activarlo
Hola, gracias por tus tutoriales, ¿cómo se podría conseguir el mismo efecto pero al pulsar una imagen en vez de un botón? He probado lo mismo pero insertando la clase css y el enlace en una imagen y no hace nada. Gracias.
Hola Álvaro, en el mismo video explico como hacerlo para una imagen, ¿Si seguiste los pasos?
Hola, Oscar
Desde la última actualización de Divi me ha dejado de funcionar, lo uso en imágenes. Ahora abre Youtube en la misma ventana. ¿Hay que hacer algún cambio?
Por cierto, tu tutorial es el mejor que hay en internet, el único claro y conciso. Gracias
Hola Benedicto, dirigete a Divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
Seguro con eso resuelves el problema con las versiones recientes de divi 🙂
Muchas gracias por tu respuesta, Oscar
He hecho lo que me dices, pero sigue sin funcionar 😢
Desactiva todas las opciones a ver…
A mi tampovo me funciona y he desactivado todo lo que conlleva optimización. Gracias Oscar
¿Cual es la url dónde aplicaste el ejercicio? Quiero darle un vistazo.
El sitio es https://24genetics.fr/ pero lo he desactivado y eliminado todo el código del ejercicio, he optado por utilizar popup-maker
Aah excelente 🙂
¡Funciona!
Con desactivar dos opciones: Dynamic CSS y Dynamic Javascript Libraries es suficiente.
Esta es la configuración que he dejado:
https://drive.google.com/file/d/1Zf56gQYmPlkF271NVZEi_nYN9UELuSFJ/view?usp=sharing
Funcionar funciona, pero con todo el pesar del mundo, incrusto el video, en PageSpeed Insights me ha bajado de 99 a 76 (versión móvil).
Gracias por todo, Oscar.
Gracias
De nada Carlos. Un abrazo.
Excelente! Funciona genial Oscar! Un abrazo!
Saludos Yira 🙂
Hola Oscar: Champion he seguido los pasos pero me abre otra ventana y se va directo a youtube, no se abre en la misma ventana ni pone el fondo unicolor, y no he hecho nada más que lo que tú indicas. No se si hay que realizar alguna configuración en DIVI o WordPress. Estaré atento a tu respuesta. Como siempre mil gracias por tu apoyo ⭐⭐⭐⭐⭐
Hola Guillermo, creo te respondí en youtube pero basicamente lo que tienes que hacer es agregar estás líneas arribas del otro script que ya tenemos. O incluso puedes insertarlo en otro módulo código…
Hola que tal, te comento que seguí los pasos pero no me funciono, el código se puso sobre el texto debajo de la imagen, pero cuando entro al editor no me salen las líneas de código y no puedo borrarlas, sabes como se puede arreglar esto?
Hola Miguel, si estás agregando los script que he dejado al final del post?
IMPORTANTE: Si tienes una versión reciente de divi y no se activa el pop up debes agregar las siguientes «rutas» en un módulo código (arriba del que ya tenemos)…
Hola ya revise el link de youtube como lo indicas en comentarios anteriores, solo que a mi no se me resolvio sabes como puedo resolverlo?
¿Agregaste los scripts que son necesarios en las versiones reciente de divi? Los dejé al final del post
Para los que de pronto no les sirvió el código para el popup de video les comparto esta, guía:
https://help.elegantthemes.com/en/articles/2970332-open-youtube-or-vimeo-videos-in-a-popup-using-the-button-module
Espero que les ayude. 😀
Gracias por el aporte Daniel 🙂