How to make Vimeo video play on button click

Hi there,

I am trying to get a lightbox link to play the video immediately after being pressed, so I don’t get the second play button from the embedded video on Vimeo. Is there any way of doing it?

The play button is in the red circle, when it’s pressed I want it to start playing the showreel from vimeo immediately within the lightbox.

Here is my public share link: http://all-ways-now.webflow.io/

Here is the shared link: https://preview.webflow.com/preview/all-ways-now?utm_source=all-ways-now&preview=e78ad2a9732a3332e7dc717edb1d0ed7

Thank you!

4 Likes

Hi Petras! Welcome to the Webflow Community!

The link you posted (published link) is helpful, but in order for the community to work on possible solutions, can you share your read-only link too?

See how here: Share a read-only link | Webflow University

Thanks!

Thanks for this, here it is:
https://preview.webflow.com/preview/all-ways-now?utm_source=all-ways-now&preview=e78ad2a9732a3332e7dc717edb1d0ed7

1 Like

Thanks for that! I see what you’re referring to now.

Check out this post and some helpful answers: Pause or stop Vimeo video after closing modal custom code - #4 by bart

What @Siton_Systems said there was correct:

Lightbox is only a trick of hide/show some overlay content (This is not stopping your video).

@bart also posed a really great solution for your use case, but it will require some slight rebuilding! However, I think the end result will be exactly what you want.

Check out Option #2 from him, as I think that’s your best bet. Here’s a good resource on how to build a pop-up modal, if you need assistance there: How to build a pop-up modal in Webflow | Webflow Blog

Once you get to the custom code portion, if you run into any issues, feel free to ping me and I can help get you going.

Hope that helps! :slight_smile:

1 Like

Hey, yes, I understand all the interaction bit of how to create the module, what I am struggling is building a custom player that would start playing from pressing the webflow button, which would also make the whole player to appear fullscreen. I can embed the video but it doesn’t respond to webflow button.

1 Like

Hey Petras! Great question. To help, I’ve built this “replica” website with all the code you need. (I took a look at the embed code you added to your website and you were quite close - your code was just in the wrong spots.)

First, look at my published website to see this working as you’d like: https://website-for-petras.webflow.io/

Then, look at my read-only link to see how things work: https://preview.webflow.com/preview/website-for-petras?utm_source=website-for-petras&preview=70c16f412bfd05a0ff72b60521b907a1

Please note that both the Play and Pause buttons have IDs of btnPlay and btnPause, respectively. Further, check out the code that I have in the page settings. (This is what actually powers the play/pause functionality.)

In short, the code defines the “player” element (the iframe), and then I followed the Vimeo API docs here and defined an existing player (which is our iframe.)

The code essentially says: when the Play button is clicked, play the video, and when the Pause button is clicked, pause the video. All of the interactions (the pause button appearing and video fading in) are all done natively in Webflow with Interactions 2.0.

Hope that helps! Please let me know if you have any questions at all. :slight_smile:


Edit for anyone looking at this solution later on: I’ve updated my replica project with the revised code found at the end of this forum post, so you don’t have to worry about factoring that in!

10 Likes

Wow, thank you so much, I will try to implement this when I get back. Could you please keep the read-only link for a few days for me to preview and analyse what you have done? Thanks a lot!

1 Like

Most definitely! I do that by default — I never delete websites that I make and post in the forum, just so users in the future can see what I did and not get hit with a 404 Error.

Cheers! :muscle:t4:

2 Likes

Hmm, it’s weird, I think I replicated everything and play/pause button seems to be working, but the problem is that video hits play and then suddenly stops. Maybe it has something to do with me hiding the whole wrapper? as yours is only made transparent?

Interesting… It actually works perfectly on my end with your published website - no unintended pausing and it looks like you did everything correctly.

Can you go incognito and tell me if the issue still persists?

It is interesting indeed… What do you mean by going incognito? You mean login and publish with chrome incognito?

It’s really weird as on Safari everything works perfectly…

1 Like

(1) Sorry! Should’ve been more clear. I was referring to Incognito Mode / Private Browsing on your browser. This version of your browser is free of any cookies / cache / extensions (unless manually allowed in Incognito mode.) If you’re using Google Chrome, see how to go Incognito here: Browse in private - Computer - Google Chrome Help

(2) Here’s a video of how this looks on my computer. (Ignore the lagging - that’s just because my computer was running too many programs at once while recording! It doesn’t look like that when I’m not recording)

2 Likes

If that’s the case, then I’d be willing to bet some Chrome extension you have is blocking the script for some reason. Check it out in Google Chrome’s incognito mode (if that’s the browser you’re using) and let me know if the issue still persists.

1 Like

No worries, thanks for explaining and for being so helpful! for some reason it still doesn’t play on chrome, on both incognito or normal…

1 Like

Hmm… can you screen record what’s going on using a tool like loom.com? Would love to see it visually!

1 Like

Also it doesn’t do that with your example…

Also, in addition to screen recording, can you also send me a screenshot of your browser console?

I know it’s an Airtable article, but it gets the instructions across well!

1 Like

here is the video:

1 Like

here is in incognito mode:

1 Like