Streaming live at 10am (PST)

How to make Vimeo video play on button click

Here is the console when it fails.

1 Like

Yeah it’s weird because sometimes it plays and sometimes it doesn’t… So strange…

Ooooh. I think this is an issue of autoplay in Google Chrome. I’m not well-versed in this particular issue but we can try to figure this out together!

For starters, can you change your embed code from:

<iframe src="https://player.vimeo.com/video/302022235" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

to

<iframe src="https://player.vimeo.com/video/302022235" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"</iframe>

and see if that works?

2 Likes

Wow, you are a genius. It does work now every time I try, perfect! Thank you so much!!!

1 Like

Lol, definitely cannot take the credit for that - Stack Overflow saves the day everytime!

2 Likes

Was just the solution I was looking for @mattvaru, thanks!

1 Like

thank you for answers

1 Like

Thanks so much for this solution. I was using magnific popup previously, but it stopped working on Chrome after Google made some changes.

This works perfectly, but only if there’s one video on the page. If there’s multiple, it only works with the first video. Any thoughts on how to apply this to multiple videos at once? Here’s my read-only link:

https://preview.webflow.com/preview/pathfinder-films?utm_medium=preview_link&utm_source=designer&utm_content=pathfinder-films&preview=fc319dc763dc3fd2b70a785c5310be59&mode=preview

@mattvaru @samliew

Hey guys! Any thoughts on my question from last week? Would love a solution to this!!

Thanks,
Jose

Hi Matt,

Thanks so much for this tutorial. It has helped me do the same, but I have one question:

The code you wrote works if the video is on the home page, but not on another page I’ve added it to (a CMS page). Can you suggest a solution?

Many thanks,

Matt

Edit: No sooner than I post, I figured it out. The other page had two videos on it - your example video in a custom embed and a YouTube video in a video embed. When I deleted the video embed, your embed worked fine.

Any idea why this happens? Is there a way to have multiple videos on the page and have webflow buttons that control each one?

Hi @mattvaru, I’ve just tried to replicate this tutorial however it’s not working for me - when I click the buttons nothing happens. The IDs are definitely matched and I have triple-checked the code with your project. Would there have been any changes rolled out by Vimeo or Webflow which have changed things? Thanks!

Were you able to address this issue? I also need to use 2 videos on the same page, and the code only works, when there is only one video.

Thanks! This works like a charm, exactly what I needed. I’m wondering if this is possible too for muting the sound as well?

In the same situation here. Did you find a solution?