Cómo abrir un video en una caja de luz en div (dos opciones)

Div es uno de los temas premium de WordPress más populares que viene con un generador de página construido, Divi Builder, para permitirle crear una hermosa página de manera visual. Al igual que otros generadores de páginas, Div Builder también viene con un elemento (llamado Modo) para agregar un video. Desafortunadamente, el módulo de video de Divi Builder no proporciona ninguna opción predeterminada para abrir el video en un cuadro de caja de luz. Si desea abrir un video en una caja de la caja de luz en el DIV, este elemento le mostrará cómo. Hay dos opciones para abrir un video en una caja de la caja de luz en Div. En primer lugar, puede instalar un complemento de división. En segundo lugar, puede agregar JavaScript y CSS Custom. Los cubriremos a todos aquí.
Al abrir un video en una caja de luz en Divo sin un complemento antes de comenzar, queremos recordarle una vez más que Divi Builder está disponible en dos versiones: un complemento independiente y una parte integral del tema de la Divic. Este método solo funciona si usa Divi Builder en el tema Div. Primero, vaya a Div -> Opciones de tema en el tablero de WordPress. Abra la pestaña de integración e inserte el siguiente código en el campo principal. Antes de pegar el código, asegúrese de que la opción de activación del código de encabezado esté activada.

Código:
(función ($) {
$ (documento) .gata (function () {
$ (‘a.video_popup, .video_popup a’). MagnificPopup ({
Tipo: “iframe”,
MainClass: “MFP-Fade”,
Eliminación de retraso: 160,
Precarga: falso,
Fijocontentpos: falso
});
});
}) (JQuery);
! Haga clic en Guardar los cambios para aplicar los cambios. Código: * Video personalizado PopUp */

/ * Icono de ajuste de cierre popup */
.MFP-WRAP.MFP-CLOSE-BTN-IN.MFP-AUTO-ACURSOR.MFP-FADE.MFP-Ready {
Arriba: 0px! IMPORTANTE;
Posición: ¡fijo! IMPORTANTE;
}
.Mfp-iframe-holder .mfp-cocount {
Ancho máximo: 70%;
}
.MFP-IFRAME-SCALLER BOTÓN.MFP-CLOSE {
Arriba: -50px;
}
.Mfp-iframe-holder .mfp-close,
.MFP-IMAGE-Holder .MFP-CLOSE,
.Mfp-wrap .mfp-close: activo {
UP: -50px! IMPORTANTE;
}
.video_popup_lightbox .mfp-i-holder .mfp-close {
Arriba: -50px;
}
.video_popup {
Posición: relativo;
-WebKit-Transition: todos los 0.3s facilitados;
-Moz-Transition: todos los 0.3s facilitados;
Transición: todos los 0.3 sencillos;
-Webkit-transform: escala (1);
-Ms-transform: escala (1);
Transformación: escala (1);
}
.video_popup a: antes {
Contenido: ‘Play’;
Cursor: puntero;
Posición: Absoluto;
Arriba: calc (50% – 55px);
Izquierda: Calc (50% – 54.5px);
IND ÍNDICE: 20;
Color de fondo: #fff;
Llenado: 55px 27px;
Limit de rayos: 50%;
Tamaño de fuente: 20px;
Espacio entre letras: 2px;
Texto-transformación: uppercase;
Color: #0a2a3b;
-WebKit-Transition: todos los 0.2s facilitados;
-Moz-Transition: todos los 0.2s facilitados;
Transición: todos los 0.2s Fase-In-Out;
}
.video_popup a: después {
Contenido: “E”;
Cursor: puntero;
Familia de fuentes: “Etmodules”;
Posición: Absoluto;
Arriba: calc (50% – 55px);
Izquierda: Calc (50% – 47px);
IND ÍNDICE: 20;
Color de fondo: #fff;
Llenado: 55px 27px;
Limit de rayos: 50%;
Tamaño de fuente: 40px;
Texto-transformación: uppercase;
Color: #0a2a3b;
Opacidad: 0;
-WebKit-Transition: todos los 0.3s facilitados; -Moz-transición: todos los 0.3s facilitados;
Transición: todos los 0.3 sencillos;
}
.video_popup.no_icon: antes,
.video_popup.no_icon: después {
Pantalla: ¡Ninguno! Importante;
}
.video_popup: no (.no_icon): hover {
-Webkit-transform: escalas (0.95);
-Ms-transform: escalas (0.95);
Transformación: escala (0.95);
}
.Video_Popup: Hover A: antes {
Opacidad: 0;
Llenado: 65px 37px;
Izquierda: Calc (50% – 64.5px);
Arriba: calc (50% – 65px);
}
.Video_Popup: Hover A: After {
Opacidad: 1;
Llenado: 65px 37px;
Izquierda: Calc (50% – 64.5px);
Arriba: calc (50% – 65px);
Tamaño de fuente: 56.5px;
}
@Media All y (Max-Width: 980px) {
.video_popup a: antes {
Arriba: calc (50% – 32.5px);
Izquierda: Calc (50% – 33px);
Llenado: 33px 17px;
Tamaño de fuente: 10px;
}
.video_popup a: después {
Arriba: calc (50% – 32.5px);
Izquierda: Calc (50% – 33px);
Llenado: 33px 17px;
Tamaño de fuente: 32px;
}
.Video_Popup: Hover A: antes {
Opacidad: 0;
Llenado: 40px 22px;
Izquierda: Calc (50% – 43px);
Arriba: calc (50% – 42.5px);
}
.Video_Popup: Hover A: After {
Opacidad: 1;
Llenado: 40px 22px;
Izquierda: Calc (50% – 43px);
Arriba: calc (50% – 42.5px);
Tamaño de fuente: 42px;
}
} Luego abra el editor de Divin Builder y agregue el módulo de imagen. Vaya a la pestaña avanzada desde el panel de configuración del módulo de imagen. Abra el bloque CSS ID y Classase y agregue la clase Video_Popup al campo de clase CSS.
Vaya a la pestaña de contenido y agregue una imagen al bloque de imágenes (la imagen jugará un papel como un video en miniatura).
Una vez que se agrega la imagen, abra el bloque de enlace e inserte la URL del video que desea agregar al campo de enlace de imagen URL. No necesita activar la opción Open in Lightbox. Una pequeña nota, el cuadro de luz puede no abrir cuando hace clic en la imagen en el editor de Divi Builder, pero se abre una vez que la página está en vivo. La apertura de un video en una caja de luz en el uso de Supreme Diva Supreme Divre es uno de los complementos de división más populares. Agrega módulos adicionales a la división del constructor, incluido el botón Supreme. El módulo de botón Supreme le permite agregar un enlace de video y abrirlo en una caja de luz. La división suprema en sí es un complemento freemium. El módulo de botón Supreme está disponible en la versión gratuita, por lo que no tiene que gastar dinero extra.


Primero, instale el complemento de Supreme Divic. Puede obtener la versión gratuita del Divin Supreme de WordPress Plugin Director. Una vez que se instale el complemento Supreme Divin, abra el editor de Divin Builder y agregue el módulo de botón Supreme.

Agregue el texto del botón al bloque de texto en la pestaña Contenido en el panel de configuración.

Luego abra el bloque de enlace e inserte la URL del video que desea agregar a la URL del botón y active la caja de luz Open AS.
Eso es todo. Puede acceder a la pestaña de diseño desde el panel de configuración para estilizar el botón. El mérito para los códigos que usamos en este tutorial devuelve Pixel.