Home WordPress How to Add Video Lightbox in WordPress with Elementor

How to Add Video Lightbox in WordPress with Elementor

Video is a great tool to promote your product or service. However, displaying a video on a website is a bit challenging since video can take up space. With a lightbox, you can display a video on a web page without consuming too much space. You can even display a video in a lightbox without having to display the video thumbnail. For instance, you can use a “watch video” link or a button.

If you use Elementor on your WordPress-based website, you can add video on any page of your website and display it in a lightbox to save space.

There are two ways to display a video in a lightbox in Elementor. First, you can enable the Lightbox option on the content setting when adding a video element (this method requires a thumbnail). Second, you can use a link or button. The second method doesn’t require a thumbnail. The video lightbox will show up once you click an anchor text or button that links to a video.

Method one

Video is one of the design elements offered by Elementor. When adding a video to the Elementor editor/canvas, there is an option to enable the lightbox. More options will appear once you enable this option. You can set such things as the entrance animation, content width, content position, and so on.

To get started, add a video by dragging the Video element to the canvas. By default, Elementor displays a video demo from YouTube. Replace this default video with your video on the Video section under the Content tab.

On the elements panel (the left side panel), scroll down to the Image Overly section under the Content tab. Click Image Overy to open the options and enable the Lightbox option.

Upload the thumbnail of your video and set the size of your thumbnail on the Image Size option.

Switch to the Style tab and click Lightbox to open the lightbox settings. Here, you can set the lightbox background, the content width, content position, entrance animation and so on.

Method one

Elementor also allows you to display a video lightbox from a link (anchor text) and button. This method is great if you have no space on your page to display the video thumbnail.

Note: This method only works on Elementor Pro.

If you use Elementor Pro, you will have a dynamic link option every time you want to add a link to a text or button. A dynamic link can be a link to a post URL, site URL, author URL, or actions like pop-up and lightbox.

To add a video lightbox from a link or button, simply activate/select a text or button and go to the Link option under the Content tab. Click the Dynamic option and select Lightbox.

Click the wrench icon and select video on the Type option. Paste your video URL.

Final words

Displaying a video in a lightbox is a great way to save your page space as it doesn’t require much space. You can even display a video lightbox from a link or button. If you use Elementor, the pro version in particular, you can add a video lightbox without dealing with JavaScript code.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

MOST-READ THIS WEEK