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…
- Add a button in Elementor
- Above the link field, click “dynamic” and choose “Lightbox” (from the dropdown).
- Click the “Lightbox” field itself
- Click the Video Icon
- 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.
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…
- Add a Video block.
- Set up the options the way you want your button to work.
- View the page
- Inspect the video element and copy the part that looks like this….
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…)
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…
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.
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.