Onclick for all video and modal

Question

I have the following questions. I have html code below where I have a button that when clicking it opens a modal and starts playing a video. I also have the JavaScript code that picks up check the video id, change the display from name modal to block and play in the video. But this page will have more than 20 videos and I would like solution that could use for all elements.

var vid = document.getElementById("myVideo1");
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementById("close");

btn.onclick = function(e) {
  e.preventDefault();
  modal.style.display = "block";

  vid.play();

}

span.onclick = function(e) {
  e.preventDefault();
  modal.style.display = "none";
  vid.pause();

}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    vid.pause();

  }
}

<div id="myModal" class="modal">
  <!-- Conteúdo do Pop-up -->
  <div class="modal-content" style="max-width: 100%;">
    <span id="close" class="close">  <p class="btn"  onclick=pauseall()>Close</p></span>

    <video id="myVideo1" class="video-js vjs-default-skin video_size " controls preload="none" data-setup='{}'>
                                           
      <source src="media/video.mp4"   type="video/mp4"> 
                                                
    </video>
  </div>
  <button id="myBtn" class="btn">Play</button>
</div>

Answer 1

Details are commented in example

// Define/declare counter variable outside of function
let idx = 0;

// Reference to <ol>
const list = document.querySelector(".playlist");
// Collect <a> within <ol> into an array
const links = Array.from(list.querySelectorAll("a"));

// Path to MP4s and PNGs
const path = "https://glpjt.s3.amazonaws.com/so/av/";
// An array of MP4s/PNGs names
const files = ["vs8s3", "vs21s3", "vs2s3"];
// Reference to <video>
const vid = document.querySelector("video");

// Reference to <dialog>
const mod = document.querySelector("dialog");
// Reference to <form>
const ui = document.forms.ui;
// Reference all form controls (<input>, <fieldset>, and <output>)
const io = ui.elements;
// Reference <input>s and <output>
const prv = io.prev;
const nxt = io.next;
const cnt = io.counter;

/**
 * Pass in a number within the range of files array (0-2)
 * Assign >idx< to that of >index<
 * Get the file name from files array at the given >index<
 * Concatenate the full path to the MP4
 * Concatenate the full path to the PNG
 * Assign path to MP4 to <video> [src]
 * Assign path to PNG to <video> [poster]
 * Assign <output> value >index< +1 (1-3)
 */
function playList(index) {
  idx = index;
  let file = files[index];
  let mp4 = path + file + ".mp4";
  let png = path + file + ".png";
  vid.src = mp4;
  vid.poster = png;
  cnt.value = idx + 1;
}

/**
 * Bind "click" event to <dialog> and <form>
 * If anything but the <dialog> is clicked visually, close <dialog>
 * https://stackoverflow.com/a/73988585/2813224
 */
mod.onclick = e => e.currentTarget.close();
ui.onclick = e => e.stopPropagation();

/**
 * Bind each <a> to the "click" event
 * Assign each <a> an #id with the value of the current index
 */
links.forEach((a, i) => {
  a.id = i;
  a.onclick = openModal;
});

/**
 * Event handler passes (e)vent object by default
 * Open <dialog>
 * Call playList() and pass the current <a> #id
 */
function openModal(e) {
  mod.showModal();
  playList(+this.id);
}

// Bind both buttons to the "click" event
prv.onclick = reverse;
nxt.onclick = forward;

/**
 * reverse() decrements >idx< and forward() increments >idx<, both
 * functions will call playList() and pass in >idx<
 */
function reverse(e) {
  idx--;
  idx = idx < 0 ? files.length-1 : idx;
  playList(idx);
}

function forward(e) {
  idx++;
  idx = idx > files.length-1 ? 0 : idx;
  playList(idx);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font: 300 5vmin/1 "Segoe UI"
}

body {
  overflow: scroll
}

.playlist a {
  display: list-item;
  position: relative;
  width: max-content;
  color: #18272F;
  text-decoration: none;
}

.playlist a+a {
  margin-top: 0.5rem;
}

.playlist a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.1rem;
  border-radius: 4px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.playlist a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.playlist a b {
  font-weight: 300;
  font-family: Consolas;
  font-size: 1.1rem;
}

dialog {
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: 0 10px 6px -6px #777;
}

dialog::backdrop {
  background: rgba(50, 50, 50, 0.3);
}  

#ui {
  padding: 0;
  border: 1.5px solid #bbb;
  border-radius: 5px;
  background: #eee;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px ridge #ddd;
  border-radius: 5px;
  font: inherit;
  font-size: 2rem;
  line-height: normal;
  background: transparent;
  cursor: pointer;  
  box-shadow: 0 6px 4px -4px #bbb;
}

.btn:hover { 
  box-shadow: 0 6px 8px -4px #999;
}

.btn:active {
  transform: scale(0.95);
}
  
.content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100vh;
  padding: 0 0.5rem;
  border: 0;
  background: #eee;
}

.content legend {
  width: 100%;
}

.content legend .btn {
  float: right;
  padding-bottom: 0.45rem;
  line-height: 0;
  height: 1.5rem;
  margin: 0.25rem -0.25rem 0.25rem 0;
  color: #888;
}

.control {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

#prev,
#next {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  line-height: 1;
  background: #eee;
}

#counter {
  font-size: 1.15rem;
  font-family: Consolas;
  padding: 0 0.75rem;
}

video {
  width: 100%;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

<ol class="playlist">
  <a href="#"><b>40</b> Seconds</a>
  <a href="#"><b>11</b> Seconds</a>
  <a href="#"><b>08</b> Seconds</a>
</ol>

<dialog class="scroll">
  <form id="ui" method="dialog">
    <fieldset class="content">
      <legend>
        <input class="btn" type="submit" value="⨯">
      </legend>
      <video controls></video>
      <fieldset class="control">
        <input id="prev" class="btn" type="button" value="⏮">
        <output id="counter"></output>
        <input id="next" class="btn" type="button" value="⏭">
      </fieldset>
    </fieldset>
  </form>
</dialog>