Wow, that title’s a mouthful.

Today, I built a landing page in Elementor where I needed to have a button open a YouTube video in a lightbox.

The Built-In Way

To make a button that opens a YouTube Video in a lightbox…

  1. Add a button in Elementor

     

  2. Above the link field, click “dynamic” and choose “Lightbox” (from the dropdown).

     

  3. Click the “Lightbox” field itself

     

  4. Click the Video Icon

     

  5. Copy and paste the YouTube URL

     

This works well but there’s one problem. The “Suggested videos” appear at the end of the video.

Using the Video Block

The video block has a much better feature set. You can set it to set Suggested Videos to “Current Video Channel” which will only show suggested videos from your own channel.

But (at least right now), you can’t have a button do the same thing.

Unless…

Copying Attributes For the Win!

In my case, I needed to have a button that opens a lightbox, but doesn’t show related videos.

So the above options wouldn’t work. But I figured out a solutions…

If you copy the attributes from a video block, you can paste those same attributes onto the button, and it behaves the same way.

Here’s how to do it…

  1. Add a Video block.
  2. Set up the options the way you want your button to work.
  3. View the page
  4. Inspect the video element and copy the part that looks like this….
screenshot showing that you should copy everything between <div and  >

Now that you have the code…

  • 5. Create a button.
  • 6. Go to the “Advanced” tab
  • 7. Paste the code in the “Attributes” section (as shown below…)
screenshot of Elementor, where you can paste the custom attributes that will make the lightbox work.

After figuring this out, I knew I would need to write it down. So I wrote this article on Launch2Success (in case other people have the same problem).

Was this helpful? Let us know in the comments below…

No Comments

Leave a Reply

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