Which is actually the best (and fastest) way to add a popup video using HTML + CSS + JavaScript?

There are several ways to add a popup video using HTML, CSS, and JavaScript, but one of the most efficient ways to do so is by using the HTML5 video element and creating a modal popup using CSS and JavaScript. Here's a general outline of the steps involved:

1. Create a video element in HTML, and set the controls to attribute to false so that the default video controls don't show up.

<video id="video-player" controls="false">
  <source src="path/to/video.mp4" type="video/mp4">
</video>

2. Create a modal element in HTML that will contain the video player. Set its display property to "none" to hide it by default.

<div id="video-modal" style="display: none;">
  <video id="video-player" controls="false">
    <source src="path/to/video.mp4" type="video/mp4">
  </video>
</div>

3. Create a button or link in HTML that will trigger the modal to open when clicked.

<button id="open-video">Open Video</button>

4. Add some CSS to style the modal and make it appear on top of other page content.

#video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#video-player {
  width: 80%;
  height: 80%;
}

5. Add JavaScript to listen for clicks on the button and show/hide the modal.

const openButton = document.getElementById('open-video');
const modal = document.getElementById('video-modal');

openButton.addEventListener('click', () => {
  modal.style.display = 'flex';
});

modal.addEventListener('click', () => {
  modal.style.display = 'none';
});