我正在创建一个可以在此处找到引导程序的网站 - 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>
`
答案 0 :(得分：14)
根据dizarter的版本和他链接到的解决方案之一，这里的答案稍微轻了一些。
$('#modal-video').on('hidden.bs.modal', function () {
$("#modal-video iframe").attr("src", $("#modal-video iframe").attr("src"));
});
答案 1 :(得分：13)
在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? 并将其包含在页面上。
在加载上述脚本（就在关闭正文标记之前）
之后添加此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>
答案 2 :(得分：9)
看看我的代码，我不需要使用任何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>
答案 3 :(得分：3)
以下是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', '');
});
答案 4 :(得分：2)
如果像我一样你想让视频自动播放，那么当你点击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。希望有所帮助。
答案 5 :(得分：2)
受到@Łukasz per https://stackoverflow.com/a/52315492/3586413 的启发，通过现场演示 @ 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);
});
答案 6 :(得分：1)
要编写有效的代码，首先我们需要检查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
}
}
答案 7 :(得分：1)
这是一个对我有用的解决方案（虽然有点hacky）：
首先，我将 iframe 与一个名为＆＃34; VideoId＆＃34; 的 div 包裹在一起：
<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=" ";
};
最后，关闭我的Panel按钮（在我的情况下它是一个模态）我添加了一个调用我的函数的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 ，但它一直报告缺少括号， - 我不知道为什么......
答案 8 :(得分：1)
该解决方案对于Boostrap 4很好用。它在同一页面上支持许多不同的模式，而无需指定模式ID。这是演示http://jsfiddle.net/hxtpoe/6k09f4x2/
$('.modal').on('hide.bs.modal', function() {
var memory = $(this).html();
$(this).html(memory);
});
答案 9 :(得分：0)
<!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>
再次使用此代码检查。它很适合我。
答案 10 :(得分：0)
非常简单的代码放在页脚中：
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
答案 11 :(得分：0)
您可以使用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 :(得分：0)
如果您有几种视频模式，则无需借助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覆盖到模态集中的第一个视频。
答案 13 :(得分：0)
打开弹出窗口时，在div中添加iframe动态，关闭弹出窗口时，清除div数据 例如：添加
$('#divifream').html('your ifream');
当popupclose
$('#divifream').html('');
这对我有用。
答案 14 :(得分：0)
可以找到一个简单的工作示例here。
sys.call(-1)