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

Posted 2023-02-24

技术标签:

【中文标题】Bootstrap 模式关闭时 Youtube 视频仍在播放【英文标题】：Youtube Video Still Playing When Bootstrap Modal Closes 【发布时间】：2014-05-02 00:57:33 【问题描述】：

我正在创建一个带有引导程序的网站，可以在这里找到 - 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"   />
</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   src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

【问题讨论】：

如果有人还在寻找答案：***.com/a/36313110/6135496 【参考方案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=""  frameborder="0" ></iframe>
</div>

【讨论】：

感谢您的意见。我查看了您刚刚发布的那些主题，但似乎没有一个解决方案有效，这意味着我可能遗漏了一些东西试一试...再次没有运气。这是实时页面，以防我误解了任何内容yourdigitalspark.com/index-test-1.html 嗨，斯蒂芬，请检查上面的更新答案，如果它有效，请告诉我。这确实有效。你显然很了不起！非常感谢。希望我能像你一样聪明。斯蒂芬，你也可以投票给答案，这意味着很多。 :) 谢谢。【参考方案2】：

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

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

【讨论】：

我用这个，但它只有在视频没有设置为自动播放时才有效。为了称赞 CloudKiller 的回答，我添加了一个适用于自动播放 @Perry 的解决方案【参考方案3】：

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

// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) 
  var idVideo = $(e.relatedTarget).data('id');
  $('#myModalPrev .modal-body').html('<iframe   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/

【讨论】：

此解决方案确实比其他解决方案有效。竖起大拇指兄弟，您节省了我很多时间。谢谢 :) 这是唯一对我有用的 :) 2018 年 6 月。视频ID放哪里了？ @CaesarBlue 数据属性，在此示例中为 data-id="ID"【参考方案4】：

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

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

【讨论】：

这太棒了！如果模态包含多个视频，则需要重置 iframe src 的其他答案将无法正常工作。（关闭模态框并重新打开它后，iframe 可能会加载错误的链接）当模态框包含多个视频时，这是一种防止 iframe 的 src 被错误加载的更出色的方法！太棒了@Łukasz！我使用了这个@forwardemail.net，但对其进行了优化，因此除非其中有<iframe>（例如YouTube），否则模态不会改变。我也做了它，所以它也适用于新添加到 DOM 的模态。如果没有我所做的更改，您当前的代码将不适用于新模式。有关新更新的解决方案@***.com/a/66014515/3586413，请参阅下面的评论。【参考方案5】：

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

//
// any modals with embedded <iframe> we can assume need reset
// <https://***.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);
);

【讨论】：

我认为的最佳答案。适用于“无限”数量的模态框/iframe 元素，无需通过 id 显式指定它们。也可以。感谢改进***.com/a/52315492/2594499 救我一命.. 谢谢！【参考方案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', '');
);

【讨论】：

【参考方案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”参数。希望对某人有所帮助。

【讨论】：

【参考方案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

【讨论】：

【参考方案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="&nbsp;";
;

最后，在关闭我的面板按钮时（在我的情况下它是一个模式），我添加了一个调用我的函数的 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，但它一直报告缺少括号，-我不知道为什么...

【讨论】：

【参考方案10】：

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

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

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

【讨论】：

【参考方案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()
    );

【讨论】：

【参考方案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"   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>

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

【讨论】：

【参考方案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 覆盖到模态集上的第一个视频。

【讨论】：

【参考方案14】：

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

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

当弹出关闭时

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

这对我有用。

【讨论】：

【参考方案15】：

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

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

【讨论】：

虽然这段代码可能会解决问题，但一个好的答案还应该解释代码的什么以及它如何提供帮助。您可以使用答案下方的编辑链接来改进帖子。让我尝试解释一下，当您关闭模式时，它会在您播放之前将视频源更新为其原始/先前状态。 @Richie：编辑您的答案以解释这一点。【参考方案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>

一切准备就绪！

【讨论】：

以上是关于Bootstrap 模式关闭时 Youtube 视频仍在播放的主要内容，如果未能解决你的问题，请参考以下文章

模态关闭时停止 youtube 视频

如何在关闭 Bootstrap 3 模式时重新加载页面

Bootstrap 4 - 避免屏幕点击的模式关闭

当我单击外部时，Bootstrap 5 静态模式仍然关闭

html 在点击外侧时防止关闭BOOTSTRAP模式

Bootstrap 模式关闭按钮