我正在创建一个带有引导程序的网站，可以在这里找到 - 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>
'
这里有一个基于dizarter版本和他链接到的解决方案之一的答案。
$('#modal-video').on('hidden.bs.modal', function () {
$("#modal-video iframe").attr("src", $("#modal-video iframe").attr("src"));
});
在 FireFox 26.0 中进行测试，按预期工作。当我关闭模态或单击其外部然后重新打开它时 - 视频返回到开始并停止。
编辑 1
在Chrome中复制，视频确实在模态关闭后继续播放。
试试这些已经回答的问题
停止使用jquery的YouTube视频？
推特引导模式停止YouTube视频
最好的方法似乎是使用YouTube API来停止视频。使用此方法的答案可在上述问题中找到。
编辑 2
此解决方案似乎正在起作用。
首先，从这篇文章中获取JS：YouTube iframe API：如何控制已经在HTML中的iframe播放器？并将其包含在页面上。
在加载上述脚本后添加此 JS(就在结束正文标记之前(
<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
callPlayer('yt-player', 'stopVideo');
});
</script>
您还需要将 ID 添加到包含 iframe 的div 中，如下所示
<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>
此解决方案适用于 Boostrap 4。它在同一页面上支持许多不同的模态，而无需指定模态 id。这是演示 http://jsfiddle.net/hxtpoe/6k09f4x2/
$('.modal').on('hide.bs.modal', function() {
var memory = $(this).html();
$(this).html(memory);
});
看看
我的代码，我不需要使用任何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/
更简单更容易，灵感来自每 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);
});
这是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', '');
});
如果像我一样，您希望视频自动播放，然后在 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"参数。希望对某人有所帮助。
要编写高效的代码，首先我们需要检查 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中完美运行。
附言我试图直接从 onclick 调用中清空 div，但它一直报告缺少括号， - 我不知道为什么......
放置在页脚中的非常简单的代码：
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
您可以使用
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()
});
<!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>
再次使用此代码检查。 它对我很有用。
如果您有多个视频模式，则无需使用 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 覆盖到模态集上的第一个视频。
当弹出窗口打开时，在div中添加iframe动态，当关闭弹出时清除div数据例如：添加
$('#divifream').html('your ifream');
当弹出关闭
$('#divifream').html('');
这对我来说是有用的。
一个简单的工作示例可以在这里找到。
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
Bootstrap 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>
你都准备好了！