How to make a video element show and play after clicking a button on my site?

I have created a video element, and i have the buttons ready, i just need to make the buttons trigger that the video element becomes visible and shows up and starts playing, like on this site: www.leadxx.net

My site is: www.outboundgrow.com


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Mathias,

First, look into how to create a modal or pop-up using interactions. You’ll find some great videos on Youtube, and probably quite a few cloneable in Made in Webflow. Once you have that, you just drop a video element inside, but here’s where things get a bit sticky-

First, you don’t want to use autoplay, because you want the video to start when the modal opens, not when the page loads. You’ll need custom code to do that, and how you write it depends on the player you’re using.

Webflow uses Embed.ly which appears to use Player.js pretty consistently, so you have have your button click open the model ( via the interaction ) and also start the video ( custom code → Player.js start ).

Similarly when the modal is closed, you need some custom code to pause the video as well. I usually use a MutationObserver when I’m building these on client sites, but there are other approaches.

Unfortunately I’ve not see any no-code solutions that can build the full experience you’re trying to recreate. Drop me a message if you need coding help.

Thank you so far the replay. For the video, we are wanting to use a loom video (loom link) for the video itself.

Is this not possible to do in any way with no code setup? I dont get why it should be so difficult to do this.

Nothing I’ve encountered. The basics of putting a video in a pop-up is simple- you can even do that with a lightbox element.

However what you’re wanting is a bit different- autoplay when the modal opens, autopause when it closes. Any time you’re doing non-standard setups and behaviors, they must be coded.

If i want to do it with a play button as standard how do I do that?

yes but how do i create the lightbox so that it launches once I click the button “watch demo” ?

create button that will toggle display: none and display: block :person_shrugging:

Thank you, I am fairly new to Webflow so basic things are still a bit hard… I created a link button and linked it to the lightbox… But it does not seem to be able to make the lightbox element with video (loom link) launch… can i not link a button to open a lightbox, that can be hidden unless the video start playing? Im new like i say so this is not so easy to figure out

The lightbox element is quite simple, you basically define the button on the canvas and Webflow takes care of displaying your media.

You’d simply paste your loom video ID into the lightbox’s video setting.

yes thanks i figured it out now :slight_smile:

Last question if someone here knows. Ive fixed everything on my website now: www.outboundgrow.com but I dont want the loom views and stuff to show up, only want it to show play and title perhaps, but not how many views it has and link to loom video itself… is something like that possible?

That’s an interesting discussion, I’ve done quite a bit of work with Loom since I use it heavily in Sygnal U for all of the Webflow guides. I have not found an easy way to modify the player options. You’d have to investigate Loom’s docs. Here’s a place to start.

However even if you find a solution, making it work with Embed.ly is another thing entirely, and Webflow utilizes that for all video players.

You would likely have to switch to a custom lightbox and IFRAME approach.

You might also look into Plyr.js, which I occasionally use to display YouTube videos when we want more styling control and minimum branding. That would require custom code integration though.

By the way when you ask “is something like that possible” the answer is 99% of the time yes- but you need to decide what time and money you’re willing to invest in researching and building that solution.

ok thank you my friend for writing a good reply. I realize this is a bit over my head in WebFlow to go for this advanced things, so I guess I will either have to stick with the player controls, or use Vimeo perhaps if that gives a bit more clean look.