How to properly rewrite the script for multiple video elements?

Question

JavaScript

There is a script that only works with one video and only one button attached to it.
The task is that when you click on the button, exactly that video is played and paused (A lot of videos can wash them and, accordingly, each has its own button). I am attaching a picture for clarity. Thank you for your reply

var overlay = document.getElementById('overlay');
var vid = document.getElementById('video');

if(overlay.addEventListener){
    overlay.addEventListener("click", play, false)
  }else if(overlay.attachEvent){
    overlay.attachEvent("onclick", play)
  }

function play() { 
    if (vid.paused){
        vid.play(); 
        overlay.className = "o";
    }else {
        vid.pause(); 
        overlay.className = "";
    }
}

Answer 1

Pause when another player starts playing. Same classes, different id.

$(".video-player").each(function (videoIndex) {
  var videoId = $(this).attr("id");
  video(videoId).ready(function() {
    this.on("play", function(e) {
      $(".video-player").each(function (index) {
        if (videoIndex !== index) {
          this.player.pause();
        }
      });
    });
  });
});