How to handle multiple players on one page using Vimeo's "player.js"

Question

Problem

I have multiple Vimeo embeds on one page. They each have custom, separate html Play/Pause buttons for controlling them.

I assumed that the best way to do this would be to create an array of players and go from there, using a bit of jQuery. Like so:

vimeoPlayers = [];

// Set up the players
$('.js-vid-player').each(function(){
  iframe = $(this).find('iframe');
  videoId = iframe.attr('id');
  vimeoPlayers[videoId] = new Vimeo.Player(iframe);
});

// Handle the play buttons 
$('.js-vid-play').click(function(){
  videoId = $(this).attr('data-video');   // Get the appropriate video we want to control.
  vimeoPlayers[videoId].play();           // This works fine.
  $(vimeoPlayers).each(function() {
    // Ideally, I would like to pause all other videos here somehow, but I'm doing something wrong.
  });
});

Questions:

First, is this the correct way of doing this? Having the multiple players in an array? The Vimeo documentation doesn't seem to give any examples of handling multiple players... or else I completely missed it somehow.
Second, how to I control all the players at once? For example, my comment in the code above about stopping all other players.

Thanks in advance!

Rebecca Sich Rebecca Sich · Accepted Answer · 2018-08-29T16:47:59

A different SO Question may be helpful as they offer a working example of how they did multiple players in JSFiddle.

In my answer there I talked about our autopause feature. Inherently when multiple players are embed in one location the default autopause behavior is that all other players will pause when one of them plays. So in relation to your comment/second question. This is actually the default behavior.

Let me know if I can be more helpful in using our API to accomplish your goals.

How to handle multiple players on one page using Vimeo's "player.js"

1 Answers