New Feature: Add Video Lightbox Without Coding

Elementor has recently introduced a video lightbox feature, enabling to pop up a video lightbox when the user clicks on an image. In this post, we explain more about this useful feature.

video-lightbox

When it comes to delivering your product or service message, any decent marketer will tell you: the best way is to use a short video. This is why sites like Invision, Apple, Google Pixel and more, all use videos as one of the first interactions with the visitor.

There are, however, problems with displaying the video right on the page. Videos take up a lot of space, can be resource consuming and can potentially slow down page load time.

In our latest release, Elementor 1.3.0, we have introduced a Video Lightbox feature, allowing you to display one or more videos in a single page, without taking so much space and resources.

With this feature, the video widget doesn’t take any space if it is not being played. You place an image, big or small, and the video pops up as a lightbox when the user clicks on the image.

How to add a video lightbox

  • To add a video lightbox, you first need to add the Video widget to the page.
  • Then, under Content, check the Image Overlay checkbox.
  • Next, check the lightbox checkbox, to open up the lightbox settings.
  • Now, click on the image on the page, so the video lightbox pops up for you to edit.
  • Finally, customize the look and feel of the lightbox.

The style of the lightbox

Once the lightbox opens up, you can go on to customize the styling of the lightbox:

Color & Opacity

Choose any color and opacity for the background around the video

video-lightbox-color

Content Width

Set the size of the video lightbox, to make it bigger or smaller

video-lightbox-size

Content Position

Align video to the top or center of the screen

video-lightbox-position

Entrance Animation

Choose from 37 entrance animations, to set how the lightbox pops up to the screen

video-lightbox-animation

As videos become more and more prominent in web design, designers and site owners need to think of new ways to incorporate videos without video embed screens taking over the entire page real estate.

The new Video Lightbox feature allows to create custom popup lightboxes for videos, without having to rely on code or external plugins.

Liked This Article?

We have a lot more where that came from! Join 639,479 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

73 Responses

  1. Nice! Talking media… also self hosted video?

    I was asked about including audio directly form media library and used a text-widget with a “add media”. Only updates when closing… using the shortcode widget on the other hand works but one cant select the media from the media library. Any solution.

  2. great love it will come in handy but like Verdi said it would be great to have a Lightbox option for the images as i could really do with that and also a more in-depth slider system that maybe could have layers to be able to animate text over the images.

    Great work though loving the updates

  3. Nice. Now, I am waiting for a woocommerce archive-page, single product page and category page editor in Elementor plugin. 😀

  4. amazing as always – not to forget the great support!!

    … but is there any timeline for the awaited image-lightbox?

    far more useful as a buildt-in option as video-lightboy as far as i am concerned. 🙂

  5. It looks nice so far! But I can’t figure out how to have a caption under the image overlay, or words that describe the video that also results in a pop-up. I’ve been using foobox, and all I have to do is wrap the image and text in a class and it pops up with the video: http://foobox.fooshowcase.com/video/

    Is there a way to have text under the image that will show the video with Elementor?

  6. It would be *really nice* if we could do image lightboxes in Elementor though. The code could be easily retrofitted. And after all it’s already replaced my other broken 3rd party plugins 🙂 ?

  7. Just now saw this, not in a position to test or answer my own question so I’ll ask: Is the lightbox and video player responsive? As in works well on phones and tablets? Resizes AND repositions itself on the fly if the user rotates their device while the video lightbox is open? This has been a real pain point with other lightboxes I’ve tried.

  8. @Ben
    I just bought Elementor Pro 199 US$ version with my username hartiberlin and now my username is located in the ZIP area code area in the profile section of my Elementor account at my. elementor com / profile/ (I edited the link to not contain dots, so this page does not censor it right away…)

  9. This is amazing. Question. Using this with the Image Overlay option on, is it possible to change the size of the Play Icon? Thanks.

  10. Fantastic Feature !! Goo oooN !!
    Please reply to my queries 🙂 :

    1- What about Modal Popups containg HTML Content like columns and rows or even shortcodes more customization for the modal box e.g. shaadows …etc ?
    2- If someone uses a multisite and needs to embed an image from site into another instead of reuploading how to make it ? as Elementor forces me to reupload image on each site !
    3- another query
    If I use Toolset Types and need to embed cusotm content made by elemtor , is there any way to make global widget for elemtor created content ?

    4- What about Logos Showcase and testimonials ?

    5- Can you add typing text effect featue ?

    6- if there any way to create text tips in sidebar ( like carousel feature ) please share it

    7- can you create floating widgets like button for modal popup or help me button ?

    I bought Visual Composer but your plugin has a light weight with fantastic load times and page sizes

    Thanks For Your Great Work 🙂

  11. Awesome. Is there any way to have it preserve uploaded images sizing?
    I.e. an icon, or any undersized, currently the img is stretched to fit container.

  12. Hi! I have an issue. I am using the image overlay but after it is on, I cannot access the video anymore. Feels like the link is under the overlay image even though I am doing everything exactly like you describe. If I take the overlay away, I can access the video. What am I doing wrong?

      1. I tried Popup Maker, the lightbox is not well designed, erratic behaviour, close button sometimes disappears on resize, it’s not useable.

        The Elementor lightbox is excellent, behaves perfectly and scales perfectly on all screens/devices.
        So an Elementor option to trigger lightbox from call to action button would be great

  13. Is there a way where you can open up a video lightbox by clicking a button? I can only make the button link to youtube link which would take the user to a different site

  14. Hey Ben Popup Maker Plugin bugs out when using it in conjunction with elementors slider. would be great to cut down on extra plugins anyway. Could you please add video lightbox by clicking a button.

  15. +1 on launch video lightbox from button/icon option.
    Plug ins don’t often work with Elementor and also slow things down too much

  16. Hi, I like it but the youtube video doesn’t play right away after clicking/touching the overlay, the Youtube thumbnail appears, then we need to click/touch a second time to play the video. How can I fix this?

  17. i love this, but what if you have a lot of image and you want to conncet the video lightbox to the images in lightbox? how can i do that?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 639,479 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.