How to Open a Video in a Lightbox in Elementor

Elementor comes with the Video widget to allow you to effortlessly add a video to a page. You can even add a dynamic video thanks to the dynamic content feature of Elementor (pro version required). When adding a video in Elementor, you can set it to open in a lightbox. This article will show you how.

In Elementor itself, there are at least two ways add a video in a lightbox. You can choose one according to your case. First, you can use the Video widget as we have just mentioned above. This method works on both versions of Elementor. Second, you can use the dynamic link feature. The pro version is required to use the latter method.

How to Open a Video in a Lightbox in Elementor Using the Video Widget

As mentioned earlier, Elementor comes with a Video widget to allow you to add a video to a page or template. The widget has a setting option to open the video in a lightbox. If you are new to Elementor, you can read our previous article to learn how to use Elementor.

First, add the Video widget to the canvas area.

Add your video by pasting the link on the Link field.

Once done adding the video, open the Image Overlay block on the Content tab on the settings panel and enable the Image Overlay option. Simply enable the Lightbox option. This will open the video in a lightbox. You can add an image overlay if you want it.

How to Open a Video in a Lightbox in Elementor Using Dynamic Link

If you use Elementor Pro, you can also add a video using the dynamic link feature. You can use any element that has an option to add a link, including the Image widget, the Button widget, the Text widget, and so on.

First, add the widget (i.e., the Button widget) to the canvas area just like usual. On the settings panel, click the dynamic icon on the Link field and select Lightbox.

Next, click the wrench icon on the Lightbox field. Click the video icon and paste the URL of the video you want to add.

That’s it. You can click the element and it should display the video in a lightbox as follows.

Customizing the Lightbox

If the default look of the Elementor lightbox doesn’t impress you, you can customize it. To do so, you can click the hamburger icon on the top-left corner of the settings panel and click Site Settings.

Click Lightbox on the SETTINGS block.

As you can see, there are some setting options you can set, including the colors.

• Background Color: The color of the lightbox background
• UI Color: The color of the buttons (close button, full-screen button, zoon-in button, share button)
• UI Hover Color: The color of the buttons on the hover mode
• Text Color: The color of the text. Applies for image lightbox

You can also set the size of the buttons on the Toolbar Icons Size option as well as the size of the navigation icons on the Navigation Icons Size option. Once you are done making the settings, click the UPDATE button to apply the changes.