How to close popup and stop video when clicking "X" button

Question

Cheers guys, I will mention from the beggining that i am new to this world and i would love some help from you regarding the following problem:

I have a button. When clicked, button opens a popup and automatically plays a video which is located within the popup. What i want to do is the following:

When the user will click the button, the popup will fire and the video will autoplay. When the user will click the close "X" button, the popup should close and video should stop/pause.

I have the following code:

HTML

          <div class="video-button-container">
            <img src="media/video-bg.png">
            <a href="#" onclick="toggle();">
              <img src="media/play.png" class="play">
            </a>
          </div>

          <div class="video-container">
            <img src="media/close.png" class="close" onclick="close();">
            <video src="media/video.mp4" controls="true" class="video"></video>
          </div>

CSS

.video-button-container {
  position: absolute;
  top: 70px;
  right: 70px;
}

.play {
  position: absolute;
  top: 25%;
  right: 35%;
}

.video-container {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.video-container.active {
  visibility: visible;
  opacity: 1;
}

.video-container video {
  position: relative;
  max-width: 900px;
  outline: none;
}

.close {
  position: absolute;
  top: 80px;
  right: 20px;
  cursor: pointer;
  max-width: 32px;
}

@media (max-width: 991px) {
  .video-container video {
    max-width: 90%;
  }
}

JS

      var videoElem = document.querySelector(".video-container video");
      var trailerElem = document.querySelector(".video-container")

      function toggle() {
        trailerElem.classList.add("active");
        videoElem.play();
        videoElem.currentTime = 0;
      }

      function close() {
        trailerElem.classList.remove("active");
        videoElem.pause();
        videoElem.currentTime = 0;
      }

Can someone please tell me, what i am doing wrong? Have a nice day!

Answer 1

The close.png element doesn't have any event bound to it as it's not visible on loading the page, so you have to bind the event after the loading.

      /* function close() {
        trailerElem.classList.remove("active");
        videoElem.pause();
        videoElem.currentTime = 0;
      }
      */
      window.onload = function () {
        document.getElementsByClassName("close")[0]
          .addEventListener("click", function (e) {
            trailerElem.classList.remove("active");
            videoElem.pause();
            videoElem.currentTime = 0;
          });
      };