Improving player button control code

Question

Would somebody be kind enough to show me the best way to loop through this so it much more efficient that just repeating everything?

const playButton = document.querySelector("#btnPlay");
const playButton1 = document.querySelector("#btnPlay1");
const playButton2 = document.querySelector("#btnPlay2");
const playButton3 = document.querySelector("#btnPlay3");
const playButton4 = document.querySelector("#btnPlay4");
const playButton5 = document.querySelector("#btnPlay5");
const playButton6 = document.querySelector("#btnPlay6");
const playButton7 = document.querySelector("#btnPlay7");
const playButton8 = document.querySelector("#btnPlay8");
const playButton9 = document.querySelector("#btnPlay9");
const playButton10 = document.querySelector("#btnPlay10");

const pauseButton = document.querySelector("#btnPause");
const pauseButton1 = document.querySelector("#btnPause1");
const pauseButton2 = document.querySelector("#btnPause2");
const pauseButton3 = document.querySelector("#btnPause3");
const pauseButton4 = document.querySelector("#btnPause4");
const pauseButton5 = document.querySelector("#btnPause5");
const pauseButton6 = document.querySelector("#btnPause6");
const pauseButton7 = document.querySelector("#btnPause7");
const pauseButton8 = document.querySelector("#btnPause8");
const pauseButton9 = document.querySelector("#btnPause9");
const pauseButton10 = document.querySelector("#btnPause10");

const iframe = document.querySelector("#player");
const iframe1 = document.querySelector("#player1");
const iframe2 = document.querySelector("#player2");
const iframe3 = document.querySelector("#player3");
const iframe4 = document.querySelector("#player4");
const iframe5 = document.querySelector("#player5");
const iframe6 = document.querySelector("#player6");
const iframe7 = document.querySelector("#player7");
const iframe8 = document.querySelector("#player8");
const iframe9 = document.querySelector("#player9");
const iframe10 = document.querySelector("#player10");
        
const player = new Vimeo.Player(iframe);
const player1 = new Vimeo.Player(iframe1);
const player2 = new Vimeo.Player(iframe2);
const player3 = new Vimeo.Player(iframe3);
const player4 = new Vimeo.Player(iframe4);
const player5 = new Vimeo.Player(iframe5);
const player6 = new Vimeo.Player(iframe6);
const player7 = new Vimeo.Player(iframe7);
const player8 = new Vimeo.Player(iframe8);
const player9 = new Vimeo.Player(iframe9);
const player10 = new Vimeo.Player(iframe10);

playButton.addEventListener("click", playVideo);
playButton1.addEventListener("click", playVideo1);
playButton2.addEventListener("click", playVideo2);
playButton3.addEventListener("click", playVideo3);
playButton4.addEventListener("click", playVideo4);
playButton5.addEventListener("click", playVideo5);
playButton6.addEventListener("click", playVideo6);
playButton7.addEventListener("click", playVideo7);
playButton8.addEventListener("click", playVideo8);
playButton9.addEventListener("click", playVideo9);
playButton10.addEventListener("click", playVideo10);

pauseButton.addEventListener("click", pauseVideo);
pauseButton1.addEventListener("click", pauseVideo1);
pauseButton2.addEventListener("click", pauseVideo2);
pauseButton3.addEventListener("click", pauseVideo3);
pauseButton4.addEventListener("click", pauseVideo4);
pauseButton5.addEventListener("click", pauseVideo5);
pauseButton6.addEventListener("click", pauseVideo6);
pauseButton7.addEventListener("click", pauseVideo7);
pauseButton8.addEventListener("click", pauseVideo8);
pauseButton9.addEventListener("click", pauseVideo9);
pauseButton10.addEventListener("click", pauseVideo10);

function playVideo() {
    player.play();
}
function playVideo1() {
    player1.play();
}
function playVideo2() {
    player2.play();
}
function playVideo3() {
    player3.play();
}
function playVideo4() {
    player4.play();
}
function playVideo5() {
    player5.play();
}
function playVideo6() {
    player6.play();
}
function playVideo7() {
    player7.play();
}
function playVideo8() {
    player8.play();
}
function playVideo9() {
    player9.play();
}
function playVideo10() {
    player10.play();
}


function pauseVideo() {
    player.pause();
    player.setCurrentTime(0);
}
function pauseVideo1() {
    player1.pause();
  player1.setCurrentTime(0);
}
function pauseVideo2() {
    player2.pause();
  player2.setCurrentTime(0);
}
function pauseVideo3() {
    player3.pause();
  player3.setCurrentTime(0);
}
function pauseVideo4() {
    player4.pause();
  player4.setCurrentTime(0);
}
function pauseVideo5() {
    player5.pause();
  player5.setCurrentTime(0);
}
function pauseVideo6() {
    player6.pause();
  player6.setCurrentTime(0);
}
function pauseVideo7() {
    player7.pause();
  player7.setCurrentTime(0);
}
function pauseVideo8() {
    player8.pause();
  player8.setCurrentTime(0);
}
function pauseVideo9() {
    player9.pause();
  player9.setCurrentTime(0);
}
function pauseVideo10() {
    player10.pause();
  player10.setCurrentTime(0);
}

Answer 1

Instead of creating a variable for each of these, you can use arrays for the buttons, iframes, and players, and you can use anonymous functions for the click event listeners.

const playerCount = 11;
const playButtons = new Array(playerCount)
  .fill(0)
  .map((_, i) => document.querySelector(`#btnPlay${i || ""}`));
const pauseButtons = new Array(playerCount)
  .fill(0)
  .map((_, i) => document.querySelector(`#btnPause${i || ""}`));
const iframes = new Array(playerCount)
  .fill(0)
  .map((_, i) => document.querySelector(`#player${i || ""}`));

const players = iframes.map((iframe) => new Vimeo.Player(iframe));

players.forEach((player, index) => {
  playButtons[index].addEventListener("click", player.play);
  pauseButtons[index].addEventListener("click", () => {
    player.pause();
    player.setCurrentTime(0);
  });
});

.fill(0) is needed because new Array(size) has "empty" elements, which are skipped over by .map.

${i || ""} is part of a template literal, this makes it so that if the value is 0 it's an empty string.

Another approach is a traditional for-loop. If you don't need to store a reference to each of buttons, etc., that you can access later, this option can be considered "cleaner" since it doesn't have extra variables leak out into the surrounding scope.

const playerCount = 11;

// if you need this
// const players = [];
// you can also repeat this for other variables you want outside of this loop

for (let i = 0; i < playerCount; i++) {
  const playButton = document.querySelector(`#btnPlay${i || ""}`);
  const pauseButton = document.querySelector(`#btnPause${i || ""}`);
  const iframe = document.querySelector(`#player${i || ""}`);

  const player = new Vimeo.Player(iframe);

  playButton.addEventListener("click", player.play);
  pauseButton.addEventListener("click", () => {
    player.pause();
    player.setCurrentTime(0);
  });

  // if you need this
  // players.push(player);
}

Speed isn't an issue for something this small (only 11 players). The choice is mostly just stylistic and whatever you find to be the most readable.