如何在 Twitter Bootstrap Modal 上停止播放 Youtube 视频答案

【问题标题】：How to stop a Youtube Video Playing on Twitter Bootstrap Model Close如何在 Twitter Bootstrap Modal 上停止播放 Youtube 视频
【发布时间】：2012-03-18 18:35:24
【问题描述】：

如何在 Twitter Bootstrap 模型关闭时停止多个 Youtube 视频的播放？

这就是我所拥有的...当我只有一个视频时，它可以正常工作...

var player = document.getElementById('MjXAo2qxMlA'); //save the object or embed youtube video in a variable
$('#ttvideoModalTwo').on('hide', function () {
  player.stopVideo();
})

var player = document.getElementById('zXscUitXHPc'); //save the object or embed youtube video in a variable
$('#ttvideoModalOne').on('hide', function () {
  player.stopVideo();
})

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

我按照 API 文档进行操作，但是当我关闭模式时，我的视频无法停止。我也无法得到上述答案，关闭按钮不会做任何事情。

最终决定在这里使用答案：http://www.kolor-designs.com/personal/stop-youtube-videos-when-dismissing-the-bootstrap-modal/

它清除 iframe 的 src。我假设他们代码中的警报是为了测试，我删除了它。

【讨论】：

【解决方案2】：

根据 API，您可以通过 $.stopVideo() 函数来停止播放视频，将其包含在您的 modal('hide') 方法中，并且您应该能够在模式关闭后停止视频，如下所示：

var player = document.getElementById('objectId'); //save the object or embed youtube video in a variable
$('#myModal').on('hide', function () {
  player.stopVideo();
})

Youtube API Documentation

【讨论】：

Ilich 我正在使用data-dismiss="modal" 数据属性来关闭我的模式。当我使用您提供的代码时，它会破坏我的模式关闭按钮，并且模式只是保持打开状态。关于如何解决这个问题的任何想法？谢谢！
@MarkRummel 你能在jsfiddle.net 上提供你的代码吗？我想看看你的标记。
我得到了同样的结果，我已经用相关代码更新了我的问题。
@DanLee 在 jsfiddle.net 上发布了一个演示，所以我可以看看。 -编辑 - 刚刚注意到问题发生了变化，最初的解决方案是否有效？我不明白。现在的问题是，当它的一个视频有效时（这是原始问题），但现在问题已更改为“多个”视频？这是两个不同的问题，第一个问题没有得到关注或反馈。
@AndresIlich 是的，我设法让它与您提出的解决方案一起使用，仅使用一个视频。但是当涉及到在单独的模态框中有多个视频时，它们不会关闭。见jsfiddle example

【解决方案3】：

这是停止视频播放的完整代码

<div class="modal fade" id="video_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <button class="close" data-dismiss="modal" type="button">×</button>
    <iframe id="ivideo_3" width="560" height="315" src="http://www.youtube.com/embed/9wiDMU-NnKU?wmode=transparent&enablejsapi=1&origin=http://<YOUR_SITE_HERE.com>" frameborder="0" ></iframe>
</div>

<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player_3;
    function onYouTubeIframeAPIReady() {
        player_3 = new YT.Player('ivideo_3');
        $('#video_3').on('hide', function () {
            player_3.stopVideo();
        });
    }
</script>

【讨论】：