我正在使用引导程序创建一个网站，可以在此处找到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">×</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>
`
在FireFox 26.0中在此处进行测试，按预期方式工作。当我关闭Modal或在其外部单击然后重新打开它时-视频又开始并停止了。
在Chrome中复制，该视频在Modal关闭后确实可以继续播放。
尝试这些已经回答的问题
Stop a youtube video with jquery?
Twitter Bootstrap Modal stop Youtube video
最好的方法似乎是使用YouTube API停止视频。上面的问题中提供了使用此方法的答案。
此解决方案似乎有效。
[首先，从此帖子中获取JS：YouTube iframe API: how do I control a iframe player that's already in the HTML?并将其包含在页面上。
在加载以上脚本后（在结束body标记之前）添加此JS
<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>
放置在页脚中的非常简单的代码：
您可以使用youtube API停止（player.stopVideo（））或暂停（player.pauseVideo（））您的视频。这里是示例代码。
如果您有几种视频模式，则最好的处理方法是不使用api：
我在这里读了很多东西，但是很多时候最简单，最直接的答案所获得的票数最少。不知道为什么这么多复杂（和不必要的）答案会获得最高的收益。
以下是根据dizarter的版本以及他链接到的解决方案之一得出的答案的简要说明。
$('#modal-video').on('hidden.bs.modal', function () {
$("#modal-video iframe").attr("src", $("#modal-video iframe").attr("src"));
});
看看我不需要使用任何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>
[这是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', '');
});
此解决方案对于Boostrap 4很好用。它在同一页面上支持许多不同的模式，而无需指定模式ID。这是演示http://jsfiddle.net/hxtpoe/6k09f4x2/
$('.modal').on('hide.bs.modal', function() {
var memory = $(this).html();
$(this).html(memory);
});
并且如果像我一样，您希望视频自动播放，然后在单击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” arg。希望能对某人有所帮助。
要编写高效的代码，首先我们需要检查DOM，以检查iframe是否存在，因此请进入下一个级别，否则不做任何事情。我也用过捕捞。
$("#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
}
}
这是一个对我有用的解决方案（虽然有点笨拙）：
首先，我用一个名为“ 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中完美运行。
P.S。我试图直接从onclick调用中清空div
，但它一直报告缺少括号，-我不知道为什么...<!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>