How To Add Video To A Lightbox Without Coding

Share the Love

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Table of Contents

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.

Content Width

Set the size of the video lightbox. Making it larger or smaller.

Content Position

Align the video to the center or top of the screen.

Entrance Animation

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,
Cheers!

0 0 vote
Article Rating

Share the Love

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Related Articals

Table of Contents

Stay Up to Date

© 2019, WP Handicraft
0
Would love your thoughts, please comment.x
()
x