<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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');
      const video = document.querySelector('video');

      btn.onclick = function() {
        videoBox.setAttribute('class','showing');
      }

      videoBox.onclick = function() {
        videoBox.setAttribute('class','hidden');
      };

      video.onclick = function() {
        video.play();
      };

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