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
<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>
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.
