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种类会停止视频。

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

1 个答案: