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

Question

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

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 = "";
}
}

JavaScript

loren.Beier asked April 19th 20 at 12:33

Related questions

More answers about "How to rewrite the script for many elements of the video?"

1 answer

Ena_Lueilwi answered on · Accepted Answer · 2020-04-19T10:35:44.818Z

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();
}
});
});
});
});