模态关闭时停止/暂停视频(不使用$符号) [英] Stop/Pause video when Modal is closed (not using $ sign)

问题描述

我在YouTube上完成了一个简单的表单弹出窗口Modal的演练，然后将表单代码替换为iFrame YouTube嵌入.那家伙当时使用的是Atom.io，所以我用了，除了音频一直在播放之外，其他所有东西都起作用.

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.

我很新，正在学习术语.在js代码中，该指南以单词"document"开头，但是在StackOverflow上，人们使用$符号，然后直接使用function().这个问题已经被回答了很多次，但是我不知道如何将这些代码整合到已有的代码中.我了解视频播放只是被暂停了.

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.

例如，在模式关闭时停止视频除了我无法考虑如何将其与我的文件合并外，我需要.我可以直接使用他们的代码，但是视频中没有解释var和元素.

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.

我尝试添加

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

但是那打破了它.我使用w3schools获得代码方面的帮助.

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

将视频嵌入空白页并在Modal中显示会更容易吗?随着网站的发展，这将需要更多工作，但至少现在是这样:/.或者，如果js只是以某种方式将目标更改为空.

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.

推荐答案

我从@Adis接收了innerHTML命令来擦除视频，然后再次使用它来放回链接，以便可以再次单击它.我围绕iframe链接创建了另一个类，因此这是唯一要清除的东西.否则，该命令还将清除按钮以关闭窗口:P.

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>';

});

这篇关于模态关闭时停止/暂停视频(不使用$符号)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！