What is the best way to dynamically create a list of new Vimeo players and add an event to pause each on button click?

Question

I am making a website with multiple Vimeo videos and using the Vimeo player SDK to pause the videos when I click a custom button.

Here is the Javascript:

var iframe = document.querySelectorAll(".iframe_popup");

      for (var i = 0; i < iframe.length; i++) {
        var player1 = new Vimeo.Player(iframe[0]);
        var player2 = new Vimeo.Player(iframe[1]);
        var player3 = new Vimeo.Player(iframe[2]);
        var player4 = new Vimeo.Player(iframe[3]);
        var player5 = new Vimeo.Player(iframe[4]);
        var player6 = new Vimeo.Player(iframe[5]);
        var player7 = new Vimeo.Player(iframe[6]);
        var player8 = new Vimeo.Player(iframe[7]);
        var player9 = new Vimeo.Player(iframe[8]);
        var player10 = new Vimeo.Player(iframe[9]);
        var player11 = new Vimeo.Player(iframe[10]);
        var player12 = new Vimeo.Player(iframe[11]);
        var player13 = new Vimeo.Player(iframe[12]);
        var player14 = new Vimeo.Player(iframe[13]);

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player1.pause();
          });

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player2.pause();
          });

        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player3.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player4.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player5.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player6.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player7.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player8.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player9.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player10.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player11.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player12.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player13.pause();
          });
        document
          .querySelector(".close,.popup_video")
          .addEventListener("click", function () {
            player14.pause();
          });
      }

Obviously this is messy and a lot of code. I am not sure the best way to rewrite this with so I just iterate over each new player and then create a function that will pause the videos when I click the 'close' button.

Answer 1

As you're using a loop, you don't need to declare all of them each time.

var iframe = document.querySelectorAll(".iframe_popup");

for (var i = 0; i < iframe.length; i++) {
    var player = new Vimeo.Player(iframe[i]);

    document
        .querySelector(".close,.popup_video")
        .addEventListener("click", function() {
            player.pause();
        });
}