How to rewrite the script for many elements of the video?

There is a script which works with only one video, and with only one button attached to him.
Task is that when you click the button it played the video and paused(They can do a lot of video, respectively, and each has its own button). Attach a picture for clarity. Thank you for your answer
5e99bb8ce5b8c822496359.png

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 = "";
}
}
April 19th 20 at 12:33
1 answer
April 19th 20 at 12:35
Solution
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();
}
});
});
});
});

Find more questions by tags JavaScript