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

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 >
            <img src="media/video-bg.png">
            <a href="#" onclick="toggle();">
              <img src="media/play.png" >
            </a>
          </div>

          <div >
            <img src="media/close.png"  onclick="close();">
            <video src="media/video.mp4" controls="true" ></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%;
  }
}

      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!

CodePudding user response：

I know if you make the video in an external window you can close that window itself which can come in handy to resize the window and much more. Meaning you could detect when the button is pressed you could trigger it to close the window and do x. (which im realizing you have done)

I know you can close the popup with window.close() so heres an example partially:

var popup;
function onReadyFunc() {
popup = window.open("https://google.com", "_blank", "top=500,left=500,width=400,height=400");
}

function closePopup() {
popup.close()
}

and you'd call the onReadyFunc() when your main page loads otherwise you may have to make a button ontop of the video for when you click it not too sure if you can detect external buttons probably though if you have access to change the class/id then you for sure can add an event when clicked to do your function to close the window and whatever.

CodePudding user response：

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;
          });
      };