Not too long ago, adding a video to your website was a bit technical and nowhere close to being mobile-friendly.
I’d like to show you how to add a video to a Lightbox without coding because nowadays you can copy a video link from YouTube, Vimeo, etc., and paste the link in the video widget of Elementor page builder and click the publish button.
Your video is now live, mobile friendly and nowhere close to being techie. Just copy & past a video link and you’re done.
However, today I want to introduce you to a feature in Elementor called a Video Lightbox.
With this feature the video doesn’t take up any space on your website, if it’s not being played.
You simply add an image, button, or link and the video pops up in a lightbox when the user clicks the link.
So, how do you add a video lightbox to your website without writing a single line of code? I gotcha!
How to add a video to a Lightbox without coding step-by-step instructions.
- First Step: You need to add the video widget to your page or post.
- Second Step: Under the Content tab, flip the switch to turn on the image overlay.
- Third Step: Flip the switch to turn on the lightbox settings.
- Fourth Step: You can click the image box to open the edit window and add your image.
- Fifth & Finally Step: Customize the look and feel of the lightbox and publish.
You’re done. You’ve just added your first video using the video Lightbox in Elementor.
Now, let’s style of the lightbox
Once you have the video Lightbox open, you can now customize the look and feel of the Lightbox.
Color & Opacity
Choose the color of background you want around the video and it’s opacity.
Set the size of the video Lightbox. Making it larger or smaller.
Align the video to the center or top of the screen.
Choose from a couple of dozen animations to set how you want the Lightbox to show up on the screen.
When it’s all said and done
The world is becoming more and more dependent upon video. which means more and more videos will need to be displayed on your website.
As website designer(s) or owner(s), we need to think of new ways to inject videos into our website(s) without having to embed the videos on our pages/posts, causing our sites to slow down.
But, with the help of Elementor or Elementor Pro, the technical part has been resolved.
The Video Lightbox feature allows us to create a pop-up using images, buttons and links without having to write a single line of code and share our videos.
Let’s get to sharing those videos you’ve created with Elementor’s Video Lightbox.
‘Til the next episode,