当Bootstrap模式关闭时，Youtubevideo仍在播放
我正在创建一个带有bootstrap的网站，可以在这里找到 – http://www.branchingouteurope.com/digital-spark-testing/
如果您选择video图像，您将看到一个模态窗口打开YouTubevideo。 我遇到的问题是，当模态窗口关闭时，video会继续播放。 我希望在模态窗口关闭时停止播放此video。
我看过网上看了很多解决方案，但似乎都没有。 这是标记……
`
在FireFox 26.0中进行测试，按预期工作。 当我关闭Modal或点击它以外然后重新打开它时 – video重新开始和停止。
编辑1
在Modal关闭后，video确实在Chrome中重播。
试试这些已经回答的问题
用jquery停止youtubevideo？
Twitter Bootstrap Modal停止Youtubevideo
最好的方法似乎是使用YouTube API停止video。 上述问题中提供了使用此方法的答案。
编辑2
这个解决方案似乎有效。
首先，从这篇文章中获取JS： YouTube iframe API：如何控制已经在HTML中的iframe播放器？ 并将其包含在页面上。
加载上述脚本后（在结束体标记之前）添加此JS
您还需要向包含iframe的div添加ID，如下所示
根据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(''); }); //on close remove $('#myModalPrev').on('hidden.bs.modal', function () { $('#myModalPrev .modal-body').empty(); });
HTML
Abrir Modal
演示： https ： //jsfiddle.net/o0ftdvs1/
如果像我一样你想让video自动播放，那么当你在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。 希望能帮助别人。
以下是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', ''); });
要编写有效的代码，首先我们需要检查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 } }
这是一个对我有用的解决方案（虽然有点hacky）：
首先，我将iframe包装成一个名为“VideoId”的div，如下所示：
然后我做了这个function：
function CloseVideo(){ document.getElementById("VideoId").innerHTML=" "; };
最后，关闭我的面板按钮（在我的情况下它是一个模态）我添加了一个调用我的函数的oncklick事件，如下所示：
当然，如果你想再次调用它，你必须用javascript重新填充VideoId的内容，如下所示：
document.getElementById("VideoId").innertHTML= '';
它在Chrome，Firefox，IE和Opera中完美运行。
PS我试图直接从onclick调用中清空div ，但它一直报告缺少括号， – 我不知道为什么……
Example of Embedding YouTube Video inside Bootstrap Modal
再次使用此代码检查。 它很适合我。
非常简单的代码放在你的页脚：
您可以使用youtube API停止（player.stopVideo（））或暂停（player.pauseVideo（））您的video。 这里是示例代码。
HTML
将此标记放在模态内容中。
加载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', }); }
在模态关闭时停止或暂停video
$('#videoModal').on('hidden.bs.modal', function (e) { // player.stopVideo(); player.pauseVideo() });
此解决方案适用于Boostrap 4.它在同一页面上支持许多不同的模态，而不指定模态ID。 这是演示http://jsfiddle.net/hxtpoe/6k09f4x2/
$('.modal').on('hide.bs.modal', function() { var memory = $(this).html(); $(this).html(memory); });