javascript/building-blocks/events/show-video-box-fixed.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Show video box example</title>
    <style>
      div {
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 480px;
        height: 380px;
        border-radius: 10px;
        background-color: #eee;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
      }

      .hidden {
        left: -50%;
      }

      .showing {
        left: 50%;
      }

      div video {
        display: block;
        width: 400px;
        margin: 40px auto;
      }

    </style>
  </head>
  <body>
    <button>Display video</button>

    <div class="hidden">
      <video>
        <source src="rabbit320.mp4" type="video/mp4">
        <source src="rabbit320.webm" type="video/webm">
        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
      </video>
    </div>

    <script>

      const btn = document.querySelector('button');
      const videoBox = document.querySelector('div');

      function displayVideo() {
        if (videoBox.getAttribute('class') === 'hidden') {
          videoBox.setAttribute('class','showing');
        }
      }

      btn.addEventListener('click', displayVideo);

      videoBox.addEventListener('click', () => videoBox.setAttribute('class', 'hidden'));

      const video = document.querySelector('video');

      video.addEventListener('click', e => {
        e.stopPropagation();
        video.play();
      });

    </script>
  </body>
</html>