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

Updated: August 22, 2022

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

11 thoughts on “How to Open a Video in a Lightbox in Divi (Two Options)”

  1. 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
  2. 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
  3. 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 Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.