关闭模态后，如何停止播放嵌入式iframe youtube视频？

Question

我从SO的不同帖子中尝试过解决方案，但似乎都无法正常工作。

我有一个带有播放视频的iframe的模态，这似乎可行，但是当我关闭模态时，我一直试图完全停止视频，但它仍然尝试播放。

iframe元素

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/VIDEO?&controls=0&rel=0&showinfo=0&playlist=VIDEO&loop=1&autoplay=1" frameborder="0"></iframe>

打开/关闭事件

$(".custom-modal").on("hidden.bs.modal", function (e) {

var iframe = $('#' + e.target.id).find("iframe");

if (iframe.attr("src") && iframe.attr('src').indexOf('autoplay') != -1) {
                var newURL = iframe.attr('src').substring(0, iframe.attr('src').length - 11);
                iframe.attr('src', newURL);
}

})


$('.custom-modal').on('show.bs.modal', function (e) {
var iframe = $('#' + e.target.id).find("iframe");
if (iframe) {
        var videoSrc = iframe.attr("src");
        iframe.attr("src", videoSrc+"&autoplay=1");
}
});

这似乎在某种程度上可以正常工作，并且autoplay标签已正确添加/删除，但是由于某种原因，当关闭模式时，由于控制台出现错误，视频仍然可以尝试再次播放（实际上并不能播放，但是当我有多个采用不同模式的视频时，我可以看到这是一个问题）

因此，当关闭模式时，会删除自动播放标签，但视频中似乎仍然存在该线程。

如何完全关闭视频，以便在关闭模式后不再发送任何请求？

---

所以我想我已经找到问题了。打开模式后，iframe便会加载到主页上，并且始终存在于后台。我尝试通过remove()删除iframe，这可以正常工作并停止错误，但是当重新打开模态时，iframe不会再次加载。

我需要一种解决方案来卸载iframe，但仍允许在打开模式时重新加载iframe。

Answer 1

我刚刚创建了两个视频网址，一个具有自动播放功能，一个没有自动播放功能，然后仅在两个之间切换就可以了：

var video = "https://www.youtube.com/embed/ogfYd705cRs";
var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", video);
})

$(".custom-modal").on("show.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", autoVideo);
});

那为什么不将视频URL存储在data属性中呢？

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="" data-video="https://www.youtube.com/embed/ogfYd705cRs" frameborder="0"></iframe>

，然后在函数内部获取视频URL：

$(".custom-modal").on("hidden.bs.modal", function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var video = iframe.attr("data-video");
    iframe.attr("src", video);
})

$('.custom-modal').on('show.bs.modal', function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var autoVideo = iframe.attr("data-video") + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    iframe.attr("src", autoVideo);
});

对于每个模式的多个视频，将视频URL放在用于打开模式的锚点上：

<a href="modals/somemodal.html" class="video-anchor" data-target="#modal1" data-video="https://www.youtube.com/embed/ogfYd705cRs" data-toggle="modal">

而是监听模式打开监听锚点单击和：

$(".video-anchor").click(function () {
  var modal = $(this).data("target");
  var video = $(this).attr("data-video");
  var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
  $(modal + ' iframe').attr('src', autoVideo);
});

，当模式关闭时，设置为src并不重要：

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", "");
})