Javascript modal关闭时仍在播放视频

当我关闭引导模式时，视频仍在播放。 所以我想要的是：当我关闭引导模式时，视频的声音就会停止

下面是脚本Js

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

和HTML代码

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <iframe width="640" height="360" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </p>
        </div>
    </div>

</div

x


好的，下面是如何做到这一点。您需要完全重新编写JS。您可以使用
iframe.postMessage（）
播放/暂停视频。下面是一个如何实现它的示例：

<div id="videoWrapper">
   <iframe width="500" height="315" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
   <input onClick="toggleVideo('hide');" type='button'>
</div>


<script>
function toggleVideo(state) {
    var div = document.getElementById("videoWrapper");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}
</script>


功能切换视频（状态）{
var div=document.getElementById（“videoWrapper”）；
var iframe=div.getElementsByTagName（“iframe”）[0].contentWindow；
div.style.display=state=='hide'？'none'：''；
func=state=='hide'？'pauseVideo'：'playVideo'；
iframe.postMessage（“{”事件“：”命令“，”函数“：”+func+”，“参数“：”}'，“*”）；
}

您还可以轻松地将
更改为您的

多谢

希望这有帮助
 您也可以使用来完成此操作，但也需要重新编写一些代码。我已根据下面的情况调整了链接示例

HTML
我已将视频替换为id为播放器的占位符
div
。YouTube API加载视频后，它将替换此
div
。我还将类
close
添加到
span
中，因此我们可以通过其类而不是标记来引用它，这将允许您在modals上使用X按钮，但也可以在其他地方使用
span
标记，而不会引起冲突

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <div id="player"></div>
            </p>
        </div>
    </div>

</div>


加载视频

var player;
function onYouTubeIframeAPIReady(){
    player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JY1ddEDcVV0',
          rel: '0',
          controls: '0',
          showinfo: '0'
        });
});


定义
stopVideo（）
函数

function stopVideo() {
    player.stopVideo();
} 


每次关闭模式时调用
stopVideo（）
。只需将其添加到“onclick”函数中即可。您还可以专门使用jQuery执行这些类型的函数，我已经展示了使用close按钮的示例

$(".close").click(function() {
    modal.style.display = "none";
    stopVideo();
});


JavaScript都在一起
我发现解决办法很简单。
我为span.onclick添加了一行-当用户单击X时

span.onclick = function() {
modal.style.display = "none";

$('iframe').attr('src', ''); //line added }

但我面临着另一个问题：当我关闭模式并再次打开它时，我想让视频再次出现。我得到了一个答案，但不是很明确：“我建议你在让文档首先显示它之前（即在它自动播放之前）先创建它的克隆。”
有人能帮忙吗？
请看这里：可能是与jonmrich不同的问题的重复。我的视频处于引导模式，而不仅仅嵌入页面。我不是专业人士，这就是为什么我要分享我的代码来帮助meEgads。这不是引导模态的显示或隐藏方式，它们具有用于启动和停止播放的回调。无法使其适应我的代码-使用模态。使用代码Zoe，视频将不会响应，这就是为什么需要使用modal boostrapI可以在大约3小时内更仔细地查看代码，在此之前，请确保正确使用
ByClass
和
ById
。抱歉，代码不起作用！使用此解决方案，您将从iframe中删除YouTube URL，因此结果如下：
如果您想使用此解决方案，您需要在单击按钮打开模式时通过相同的方法重新添加URL，如下所示：
btn.onclick=function（）{modal.style.display=“block”$（“iframe”）.attr（'src'，'https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&；controls=0&；showinfo=0'）；}
如果添加更多模态/视频，此解决方案将不容易扩展。我单击“myBtn”时未发生任何问题。模态消失了
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
$(".close").click(function() {
    modal.style.display = "none";
    stopVideo();
});
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        stopVideo();
    }
}
var player;
$( document ).ready(function() {
    player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JY1ddEDcVV0',
          rel: '0',
          controls: '0',
          showinfo: '0'
        });
});

function stopVideo() {
  player.stopVideo();
}

span.onclick = function() {
modal.style.display = "none";

$('iframe').attr('src', ''); //line added }