Stop/Pause video when Modal is closed (not using $

问题:

I followed a walkthrough on YouTube for a simple form popup Modal, then replaced the form code with iFrame YouTube embedding. The guy was using Atom.io so I used that, and everything works except the audio keeps playing.

I am very new and learning terms as I go. In the js code, the guide started lines with the word "document" but on StackOverflow people are using a $ sign then straight to the function(). This question has been answered multiple times however I don't know how to incorporate that code into what I have. I understand that the video playback is simply being paused.

For example, Stop video when modal is closed looks like exactly what I need except I can't think how to merge it with my file. I could just use their code straight-up but then there's var and elements that weren't explained in the video.

I have tried adding

document.querySelector(".bg-modal").attr = "src","";

but that just broke it. I use w3schools to get help with code.

HTML

<!-- Modal Section -->
<div class="bg-modal">
    <div class="modal-content">
      <div class="close">+</div>
      <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
  </div>
</div>

CSS

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.modal-content {
    width: 860px;
    height: 472px;
    background-color: rgb(192, 255, 255);
    border-radius: 8px;
    text-align: left;
    padding: 0px;
    position: relative;
}

.close {
    position: absolute;
    top: -5px;
    right: 0px;
    font-size: 32px;
    transform: rotate(45deg);
    cursor: pointer;
}

Javascript

document.getElementById("button").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "flex";
});

document.querySelector(".close").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "none";
});

Would it be easier to just embed the video to a blank page and show that in the Modal? It'll be more work as the site grows but at least it's something for now :/. Or if the js just changed the target to nothing somehow.

回答1:

I would reccommend doing something like this:

var video = document.createElement("video"); video.setAttribute("src", "nameOfFile.ogg");

Then you can do something like:

video.pause(); video.currentTime = 0;

From w3Schools:

var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
}

You can then call these functions from inside your closing/open modal functions

回答2:

Have you tried to user innerHTML?

For example:

<button type="button" name="button" id="button">Click</button>
<!-- Modal Section -->
<div class="bg-modal">
  <div class="modal-content">
       <div class="close">+</div>
         <div id="video">
           <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
         </div>
      </div>
</div>

<script type="text/javascript">
  document.getElementById("button").addEventListener("click", function() {
      document.querySelector(".bg-modal").style.display = "flex";
      document.getElementById("video").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>';
  });

  document.querySelector(".close").addEventListener("click", function() {
      document.getElementById("video").innerHTML = '';
      document.querySelector(".bg-modal").style.display = "none";
  });
</script>

回答3:

I took the innerHTML command from @Adis to erase the video and then used it again to put the link back so it could be clicked a second time. I created another class around the iframe link so that it was the only thing being cleared. Otherwise, the command was also clearing the button to close the window :P.

//Video 001
document.getElementById("button").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".close").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "none";
  document.querySelector(".theVideo").innerHTML  = "";
    document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe></div>';

});