How to Open a Video in a Lightbox in Divi (Two Options)

Divi is one of the most popular premium WordPress themes which comes with a built-in page builder — Divi Builder — to allow you to create a beautiful page in a visual way. Just like other page builders, Divi Builder also comes with an element (called module) to add a video. Unfortunately, the Video module of Divi Builder offers no default option to open the video in a lightbox. If you want to open a video in a lightbox in Divi, this article will show you how.

There are two options to open a video in a lightbox in Divi. First, you can install a Divi plugin. Second, you can add custom JavaScript and CSS code. We will cover them all here.

Opening a Video in a Lightbox in Divi without Plugin

Before getting started, we want to remind you once again that Divi Builder is available in two versions: a standalone plugin and an integral part of the Divi theme. This method works only if you use Divi Builder on the Divi theme.

First, go to Divi -> Theme Options on your WordPress dashboard. Open the Integration tab and paste the following code to the head field. Before pasting the code, make sure the Enable header code option is enabled.

The code:

<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('a.video_popup, .video_popup a').magnificPopup({
			type: 'iframe',
			mainClass: 'mfp-fade',
			removalDelay: 160,
			preloader: false,
			fixedContentPos: false
		});
	});
})(jQuery);
</script>

Still on the theme options page, open the General tab and paste the following code to the Custom CSS field. Click the Save Changes button to apply the changes.

The code:

* Custom Video Popup */
/* Popup Close Icon Tweak */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
	top: 0px !important;
	position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
    max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
    top: -50px ;
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
    top: -50px !important;
}

.video_popup_lightbox .mfp-iframe-holder .mfp-close {
    top: -50px;
}

.video_popup {
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.video_popup a:before {
    content: 'play';
    cursor: pointer;
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 54.5px);
    z-index: 20;
    background-color: #fff;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0a2a3b;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.video_popup a:after {
    content: 'E';
    cursor: pointer;
    font-family: 'ETmodules';
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 47px);
    z-index: 20;
    background-color: #fff;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 40px;
    text-transform: uppercase;
    color: #0a2a3b;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.video_popup.no_icon:before,
.video_popup.no_icon:after {
    display: none!important;
}

.video_popup:not(.no_icon):hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

.video_popup:hover a:before {
    opacity: 0;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
}

.video_popup:hover a:after {
    opacity: 1;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
    font-size: 56.5px;
}

@media all and (max-width: 980px) {
    .video_popup a:before {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 10px;
    }
    .video_popup a:after {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 32px;
    }
    .video_popup:hover a:before {
        opacity: 0;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
    }
    .video_popup:hover a:after {
        opacity: 1;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
        font-size: 42px;
    }
}

Next, open Divi Builder editor and add the Image module. Go to the Advanced tab on the settings panel of the Image module. Open the CSS ID & Classes block and add the video_popup class to the CSS Class field.

Go to the Content tab and add an image on the Image block (the image will play a role as the video thumbnail).

Once the image is added, open the Link block and paste the URL of the video you want to add on the Image Link URL field. No need to enable the Open in Lightbox option.

A little note, the lightbox might doesn’t open when you click the image on the Divi Builder editor, but it does open once the page goes live.

Opening a Video in a Lightbox in Using Divi Supreme

Divi Supreme is one of the most popular Divi plugins. It adds extra modules to your Divi Builder, including the Supreme Button. The Supreme Button module allows you to add a video link and open it in a Lightbox. Divi Supreme itself is a freemium plugin. The Supreme Button module is available on the free version, so you don’t need to spend extra money.

First, install the Divi Supreme plugin. You can get the free version of Divi Supreme on the plugin directory of WordPress. Once the Divi Supreme plugin is installed, open the Divi Builder editor and add the Supreme Button module.

Add the button text on the Text block under the Content tab on the settings panel.

Next, open the Links block and paste the URL of the video you want to add on the Button URL field and enable the Open as Video Lightbox option.

That’s it. You can go to the Design tab on the settings panel to style up the button.

The credit for the codes we use on this tutorial goes to Divi Pixel.