How to make Vimeo video play on button click

Design help Custom code
21

Here is the console when it fails.

24
241242×1872 118 KB

1 Like
23

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

24

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
25

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

1 Like
26

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

https://stackoverflow.com/a/54681263

2 Likes
27

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

1 Like
28

thank you for answers

1 Like
29

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

30

@mattvaru @samliew

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

Thanks,
Jose

31

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?

32

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!

33

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.

34

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

35

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

1 Like
36

Yes, I ran 2 play buttons

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow API
  
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player($('#v1'));
  
  $('#btnPlay').click(function() {
  	player.play();
	});
  
  $('#btnPause').click(function() {
  	player.pause();
	});
  
});

and

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow API
  
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player($('#v2'));
  
  $('#btnPlay2').click(function() {
  	player.play();
	});
  
  $('#btnPause2').click(function() {
  	player.pause();
	});
  
});
38

Hello! Thanks for your code! Could you tell me how to add to this code so that the video stops after scrolling? Thank you.

39

Does this have to done with an html embed? Is there a way to accomplish it using the webflow video element - using a CMS also.