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 solution…

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…

2 Comments
  • D says:

    Thank you for this

    In the latest update, you now have to change the code format

    Add your code for the element to the editor, using the format key|value.
    For example, to add role=”presentation” to the element’s HTML, enter role|presentation here.

    • Administrator says:

      Thanks for the tip. That does make things a bit more complicated. It this point, it might be easier to make a HTML block with the required attributes.

Leave a Reply

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