Divi Builder is a drag and drop page builder by Elegant Themes. This tutorial will show you how to open a video lightbox popup when clicking an image.

There are 3 steps in this tutorial. At the end of the tutorial, we will also discuss how to add a play button on top of the image.

• Step 1 - Install Wonder Lightbox
• Step 2 - Add an Image Module
• Step 3 - Activate Video Lightbox on Image Module
• Additional - Display a play button on top of the image

Step 1 - Install Wonder Lightbox

First please install the WordPress premium plugin Wonder Lightbox. You can download the Free Version from the product homepage, try it, make sure it works for you before upgrading to the commercial version.

Step 2 - Add an Image Module

In Divi Builder, add an Image module. In Image Module Settings dialog, Content tab, upload an image.

Step 3 - Activate Video Lightbox on Image Module

In Image Module dialog, Content tab, enter the video URL to the Link URL input box.

• For MP4 video, enter the URL of the video file. If you have uploaded the video file to WordPress Media Library, you could view this tutorial to get the URL: How to find the URL of media files uploaded to WordPress Media Library
• For YouTube video, enter the YouTube page URL, for example, https://www.youtube.com/watch?v=c9-gOVGjHvQ
• For Vimeo URL, enter the Vimeo embed URL, for example, https://player.vimeo.com/video/147079122

To activate lightbox and open the Video in a lightbox popup, in Advanced tab, enter wplightbox to the CSS Class input box.

You can also add extra CSS class names to specify the lightbox width and height, for example, adding wplightbox-width-1024 and wplightbox-height-768 will specify the lightbox popup width and height as 1024 by 768.

Additional - Display a play button on top of the image

If you want to add a play button on top of the image, in the WordPress backend left menu, Divi -> Theme Options, General tab, scroll down to the bottom of the page, add the following code to the Custom CSS input box:

.wplightbox .et_pb_image_wrap:after {
    font-family: ETmodules;
    content: "\49";
    font-size: 48px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -24px;
}