Not to long ago, adding a video to your website was a bit technical and nowhere close to being mobile friendly.
And let’s not mention the problems with displaying a video right on the page. Video took up a lot of space and was quit heavy on the resources.
Now-a-days 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 simple 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 righting a single line of code? I gotcha!
How to add a video lightbox
- First Step: Yu 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.
- Forth 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 animation to set the 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,