Bootstrap 模式关闭时 Youtube 视频仍在播放

Question

我正在创建一个带有引导程序的网站，可以在这里找到 - http://www.branchingouteurope.com/digital-spark-testing/

如果您选择视频图像，您将看到一个打开 youtube 视频的模态窗口。我遇到的问题是，当模式窗口关闭时，视频会继续播放。我希望该视频在模式窗口关闭时停止。

我在网上查看并阅读了许多解决方案，但似乎没有一个有效。这是标记...

<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/>
</div>
</span>

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
  <iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

`

Answer 1

在 FireFox 26.0 中进行测试，按预期工作。 当我关闭模态框或在其外部单击然后重新打开它时 - 视频将重新开始并停止。

编辑 1

在Chrome中重现，Modal关闭后视频确实一直在播放。

试试这些已经回答的问题

Stop a youtube video with jquery?

Twitter Bootstrap Modal stop Youtube video

最好的方法似乎是使用 YouTube API 来停止视频。上述问题中提供了使用此方法的答案。

编辑 2

这个解决方案似乎奏效了。

首先，从这个帖子中获取 JS：YouTube iframe API: how do I control a iframe player that's already in the HTML? 并将其包含在页面上。

在你加载了上面的脚本之后添加这个 JS（就在结束 body 标记之前）

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>

您还需要向包含 iframe 的 div 添加一个 ID，如下所示

<div class="modal-body" id="yt-player">
    <iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe>
</div>

Answer 2

根据 dizarter 的版本和他链接到的解决方案之一，这是一个稍微轻松的答案。

$('#modal-video').on('hidden.bs.modal', function () {
    $("#modal-video iframe").attr("src", $("#modal-video iframe").attr("src"));
});

Answer 3

看看我的代码，我不需要使用任何 API

// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) {
  var idVideo = $(e.relatedTarget).data('id');
  $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/' + idVideo + '?autoplay=true" frameborder="0" allowfullscreen></iframe>');
});
//on close remove
$('#myModalPrev').on('hidden.bs.modal', function () {
   $('#myModalPrev .modal-body').empty();
});

HTML

<a href="#" data-id="5Kp_1Vq6pRg" data-target="#myModalPrev" data-toggle="modal">Abrir Modal</a>
    <div class="modal fade" id="myModalPrev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="myModalLabel" class="semi-bold">Visualizar <strong>Marca</strong>.</h4>
                    </div>
                    <hr>
                    <div class="modal-body">
                        Modal Content
                    </div>
                    <hr>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary"><i class="fa fa-times"></i> Fechar</button>               
                    </div>
                </div>
            </div>
        </div>

演示： https://jsfiddle.net/o0ftdvs1/

Answer 4

此解决方案适用于 Boostrap 4。它在同一页面上支持许多不同的模态，而无需指定模态 ID。这是演示http://jsfiddle.net/hxtpoe/6k09f4x2/

$('.modal').on('hide.bs.modal', function() {
     var memory = $(this).html();
     $(this).html(memory);
});

Answer 5

@Łukasz per https://stackoverflow.com/a/52315492/3586413 的灵感来自 @Łukasz 和现场演示 @https://forwardemail.net，更简单。

//
// any modals with embedded <iframe> we can assume need reset
// <https://stackoverflow.com/a/52315492>
//
$('body').on('hide.bs.modal', '.modal', function() {
  const $modal = $(this);
  // return early if there were no embedded YouTube videos
  if ($modal.find('iframe').length === 0) return;
  const html = $modal.html();
  $modal.html(html);
});

Answer 6

这里是 CloudKiller 的答案的替代方案，它实际上适用于自动播放，只需将 .attr 更改为 .removeAttr，如下所示：

jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src"));

但更精简/简化的版本是简单地将src 替换为空值：

$('#myModal iframe').attr('src', '');

因此，您需要添加的唯一代码是：

jQuery('#myModal').on('hidden.bs.modal', function (e) {
    $('#myModal iframe').attr('src', '');
});

Answer 7

如果您像我一样希望视频自动播放，那么当您在 Bootstrap 模式上单击关闭时让它们停止，您需要执行以下操作：

$('.modal-iframe-youtube').click(function (e) {
        e.preventDefault();
        var sitetypeHref = $(this).attr('href');
        var sitetypeHrefAuto = sitetypeHref + "?autoplay=1"
        //sitetypeHref = sitetypeHref.replace('watch?v=', 'v/');
        $('#modal-window-iframe-youtube').on('shown.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHrefAuto);
        });
        $("#modal-window-iframe-youtube").on('hidden.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHref);
        });
        $('#modal-window-iframe-youtube').modal({ show: true });
    });

请注意，我正在动态添加“?autoplay=1”参数。希望对某人有所帮助。

Answer 8

要编写高效的代码，首先我们需要检查 DOM 准备好 iframe 是否存在，如果存在则进入下一个级别，否则不要做任何事情。我也用过 catch。

$("#myModal").on("hidden.bs.modal", function() {

    var _this = this,
        youtubeSrc = $(_this).find("iframe").attr("src");

    if($(_this).find("iframe").length > 0){                     // checking if there is iframe only then it will go to next level
        $(_this).find("iframe").attr("src", "");                // removing src on runtime to stop video
        $(_this).find("iframe").attr("src", youtubeSrc);        // again passing youtube src value to iframe
    }
}

Answer 9

这是一个对我有用的解决方案（虽然有点 hacky）：

首先，我用一个名为 "VideoId" 的 div 包装了我的 iframe，如下所示：

<div id="VideoId" style="position: relative; padding: 25px; height: 0;">
    <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
    src="//www.youtube.com/etc..."
    frameborder="0" 
    allowfullscreen>
    </iframe>
</div>

然后我做了这个函数：

function CloseVideo(){
    document.getElementById("VideoId").innerHTML=" ";
};

最后，在关闭我的面板按钮时（在我的情况下它是一个模式），我添加了一个调用我的函数的 oncklick 事件，如下所示：

<button type="button" class="btn pull-right" onclick="CloseVideo();" data-dismiss="modal">Back</button>

当然，如果你想再次调用它，你必须用javascript重新填充VideoId的内容，如下所示：

document.getElementById("VideoId").innertHTML=
 '<iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"+
    'src="//www.youtube.com/etc..."'+
    'frameborder="0"'+ 
    'allowfullscreen>'+
    '</iframe>';

它在 Chrome、Firefox、IE 和 Opera 中完美运行。

附：我试图直接从 onclick 调用中清空 div，但它一直报告缺少括号，-我不知道为什么...

Answer 10

在页脚中放置非常简单的代码：

<script language="javascript" type="text/javascript">

    $(function(){
            $('.close').click(function(){      
                    $('iframe').attr('src', $('iframe').attr('src'));
    });
            });
</script>

Answer 11

您可以使用 youtube API 来停止 (player.stopVideo()) 或暂停 (player.pauseVideo()) 您的视频。这里是示例代码。

HTML

将此标记放置在您的模态内容中。

<div id="player"></div>

加载 youtube API 并初始化播放器

 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 player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'N8c20YDDHd8',
        });
      }

在模式关闭时停止或暂停视频

     $('#videoModal').on('hidden.bs.modal', function (e) {
        // player.stopVideo();
        player.pauseVideo()
    });

Answer 12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    $("#myModal").modal('show');
    var url = $("#cartoonVideo").attr('src');

    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });

    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/LGWqUVFrfU4?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>     

再次使用此代码检查。它很适合我。

Answer 13

如果您有多个视频模态，不使用 api 处理它的最佳方法是：

$('#myModal').on('hidden.bs.modal', function (e) {
  var $iframes = $(e.target).find('iframe');
  $iframes.each(function(index, iframe){
  $(iframe).attr("src", $(iframe).attr('src'));
  });
})

这会遍历模态框上的所有 iframe 并重置它们，而不是将所有 iframe 的 src 覆盖到模态集上的第一个视频。

Answer 14

当弹出窗口打开时在 div 中添加 iframe 动态，当关闭弹出窗口时清除 div 数据 例如：添加

$('#divifream').html('your ifream');

当弹出关闭时

$('#divifream').html('');

这对我有用。

Answer 15

可以在here 找到一个简单的工作示例。

   $("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Answer 16

引导程序 4 和 5 - YouTube iFrame

模式关闭时停止视频，再次打开时准备播放视频。

$('#yourModalID').on('hide.bs.modal', function(e) {    
   var $if = $(e.delegateTarget).find('iframe');
   var src = $if.attr("src");
   $if.attr("src", '/empty.html');
   $if.attr("src", src);
});

只需将 ID 添加到您的模态框（在本例中为 #yourModalID）。示例：

<div class="modal" id="yourModalID" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>

一切准备就绪！