即使关闭模态框，视频也会继续播放

Question

我正在嵌入要在模态框中打开的 Wistia 视频。 我已经嵌入了同样的罚款，但是当我关闭模态框时，视频仍然继续播放。

代码如下。

HTML

<a target="_self" class="wistia_embed" name="wistia_embed" id="myImg">Watch Now</a>
<div id="myModal" class="modal">  
  <iframe allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed modal-content" name="wistia_embed" src="https://fast.wistia.com/embed/iframe/g5pnf59ala" width="480" height="273"></iframe>
  <div id="caption"></div>
</div>

脚本：

var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var modal = document.getElementsByClassName("modal")[0];
modal.onclick = function() { 
    modal.style.display = "none";
}

JSFiddle 演示链接：

FIDDLE LIVE DEMO

当您点击立即观看时，视频会打开。当您在外部单击时，模式关闭，但视频仍在播放。

我希望在模式关闭时关闭视频，但它对我不起作用。 其次，我还希望视频在您点击“立即观看”时自动播放。

Answer 1

试试这个（更新）：

https://jsfiddle.net/tonnjngm/

var modal = document.getElementsByClassName("modal")[0];
modal.onclick = function() { 
    modal.style.display = "none";
    var src = modal.querySelector('iframe').getAttribute('src');
    modal.querySelector('iframe').setAttribute('src', src);
}

重置src 会停止视频。