β–Ό
Streaming live at 10am (PST)

Vimeo auto-play from overlay button

Hi!

I am currently using this code to auto play a video from an overlay button I made. I wanted to use this for multiple videos on one page but I need to use different IDs. Can anyone help me with adding the code for more IDs? Thanks :pray:t2::crossed_fingers:t2:

Codepile

<script src="https://player.vimeo.com/api/player.js"></script>

<script>

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(iframe);
  
  $('#btnPlay').click(function() {
  	player.play();
	});
  
  
  $('#btnPause').click(function() {
  	player.pause();
	});
  
});

</script>



Here is my site Read-Only: Webflow - Nao Now

@christopher_kuchta can you share a read only link and site preview?

Just added to my post! The videos are displayed on the English Classes page

Can you share the published site URL as well since it’s using custom code? Thanks.

1 Like

https://nao-now-preview-31bb483f4f20197539c98f9.webflow.io/english-classes

@christopher_kuchta if you just give each button an id of β€œbtnPlay” does the script work as is or does it only play the first video?

Something like this might work (I’m not a code guru)…

var videoList = document.querySelectorAll('iframe');

$('#btnPlay0').click(function() {
    var player = new Vimeo.Player(videoList[0]);
  	player.play();
	});

$('#btnPlay1').click(function() {
    var player = new Vimeo.Player(videoList[1]);
  	player.play();
	});

$('#btnPlay2').click(function() {
    var player = new Vimeo.Player(videoList[2]);
  	player.play();
	});

I removed the Pause function as I think the default vimeo player can handle that now that it is displayed. Essentially what this script does is get a list of all the iframes on the document using document.querySelectorAll('iframe') instead of what you had before which only returns the first instance.

Then, depending on which play button is pressed, btnPlay0, btnPlay1, etc. it creates and plays the corresponding video in videoList.

Awesome it worked!! Appreciate you taking your time to help me :raised_hands:t2:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.