How to Open a Video in a Lightbox in Elementor

Updated: June 8, 2021

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.

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

1 thought on “How to Open a Video in a Lightbox in Elementor”

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 Elementor.

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.