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

Updated: June 13, 2021

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

8 Comments

  • This worked great on my website!

    Unfortunately since the latest Divi Theme update (08-18-2021) this solution doesn’t work anymore. The links just open regularly and not in a lightbox.

    I would greatly appreciate if you could find a way update this, since it worked so perfectly!

    Reply
    • This is due to Divi 4.10.x’s new Page Speed enhancements no longer loading the magnificPopup script site-wide by default. A quick fix is to add an image module somewhere on the same page with a 1pixel transparent GIF or PNG, and set it’s Link > Open in Lightbox setting to on. You can even “Disable” the module and it will still work to trigger the loading of the magnificPopup script for that page. I currently have a ticket open with Divi about this to see if there’s better method, but the transparent pixel light box trick works.

      Reply
  • I’ve got the pop-up functionality to work, however, the video doesn’t play in the pop-up. I’ve tried different variations of the youtube URL and it refuses to play any of them. Not sure what the issue, looks like youtube is refusing to connect, or just has vague “errors”. I didn’t try the plugin version as I want the lightbox to be triggered from a thumbnail, not a button. It’s a good starting point though and I’ll probably try to debug more later and build a similar feature into my child theme! Thanks.

    Reply
  • Hi,
    with the Supreme Button, it doesn’t work with a local video in the media library. the lightbox appears in black but the video doesn’t show…
    how to fix it please ?

    Reply

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general