How to open a video lightbox on clicking image in ElegantThemes Divi theme


WonderPlugin Lightbox


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.

Step 1 - In Divi Builder, add an Image module

Step 2 - In Image Module Settings dialog, Content tab, upload the image.

Step 3 - In Content tab, enter the video URL to the Link URL input box.

Step 4 - In Advanced tab, enter wplightbox to the CSS Class input box.

Please note, if you are using the Divi frontend Visual Builder, the lightbox effect will not work in the Visual Builder. Please exit the Visual Builder and test the effect in the final webpage.

Step 5 (optional) - 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;