Javascript Twitter Bootstrap Modal 停止 Youtube 视频

Twitter Bootstrap Modal stop Youtube video

提问by catchmikey

I'm very new to javascript and trying to use Twitter bootstrap to get a good looking website up and running quickly. I know this has something to do with jquery, but I'm not sure how to stop my video when I push the close button or the close icon.

我对 javascript 非常陌生，并试图使用 Twitter 引导程序来快速启动并运行一个漂亮的网站。我知道这与 jquery 有关系，但是当我按下关闭按钮或关闭图标时，我不确定如何停止我的视频。

Can someone explain how I can get my video to stop playing because even when I close the window, I can still hear it in the background.

有人可以解释一下如何让我的视频停止播放，因为即使我关闭窗口，我仍然可以在后台听到它。

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

回答by gmslzr

I know I'm 2+ years late, but since then, a couple of things have changed, with B3 the new way to perform this out of the box is this:

我知道我晚了 2 年以上，但从那以后，一些事情发生了变化，B3 开箱即用的新方法是：

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Have fun with Bootstrap!

使用 Bootstrap 玩得开心！

回答by RobCalvert123

There is a nice proper way of doing this - see the comments in the approved answer to this post.

有一个很好的正确方法 - 请参阅这篇文章的已批准答案中的评论。

Couldn't get that working first time round myself though, and was in a rush, so I did a rather horrible hacky bit of code which does the trick.

虽然我自己第一次无法做到这一点，而且很匆忙，所以我做了一个相当可怕的hacky代码来解决这个问题。

This snippet 'refreshes' the src of the embed iframe, causing it to reload:

此代码段“刷新”了嵌入 iframe 的 src，使其重新加载：

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});

回答by knightkiddo

If someone still has the problem, try this, it worked for me:

如果有人仍然有问题，试试这个，它对我有用：

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});

回答by Nathan McFarland

Here is a simple way I've found for having a video play in a modal window, and then stop playing on close.

这是我发现的一种在模式窗口中播放视频的简单方法，然后在关闭时停止播放。

Use the .html to load the iFrame with your video into the modal-body, when the modal is shown, and then replace the modal-body with nothing when it is hidden.

当模态显示时，使用 .html 将带有视频的 iFrame 加载到模态主体中，然后在隐藏时将模态主体替换为空。

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

Here is a jsfiddle example:

这是一个jsfiddle示例：

http://jsfiddle.net/WrrM3/87/

http://jsfiddle.net/WrrM3/87/

回答by thekingoftruth

Here, I generalize @guillesalazar's answer.

在这里，我概括了@guillesalazar 的回答。

This will reset any iFrame within any bootstrap modal (when the modal is closed):

这将重置任何引导模式中的任何 iFrame（当模式关闭时）：

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

Add this to your layout and you're set.

将此添加到您的布局中，您就可以设置了。

UPDATE:Code modified for modals with multiple iFrames.

更新：为具有多个 iFrame 的模态修改了代码。

回答by littlealien

You should empty iframe src first and then set it up again.

您应该先清空 iframe src，然后重新设置它。

So my working answer:

所以我的工作答案：

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

October, 2014. For Bootstrap 3.

2014 年 10 月。对于 Bootstrap 3。

回答by Brandon Franklin

Here is my solution, it solves the following using bootstrap event calls:

这是我的解决方案，它使用引导事件调用解决了以下问题：

1. Autoplay movie when showing the modal
2. Stop movie when modal is hidden

1. 显示模态时自动播放电影
2. 模式隐藏时停止电影

HTMLcarousel inside modal, first active item is the iframe video

模态内的HTML轮播，第一个活动项是 iframe 视频

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascriptautoplay when displaying modal, then reset the URL and apply it to iframe src again

显示模式时Javascript自动播放，然后重置URL并将其再次应用于iframe src

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});

回答by nikola_wd

This one does it perfectly:

这个完美地做到了：

$("#myModal").on("hidden.bs.modal", function(t) {
   var o = $(t.target).find("iframe");
   o.each(function(t, o) {
      $(o).attr("src", $(o).attr("src"))
   });
});

If you however want to have it start when modal opens / stop when it closes use this code:

但是，如果您希望在模式打开时启动/关闭时停止，请使用以下代码：

But make sure to add enablejsapi=1in your src, like this for example:

但请确保添加enablejsapi=1您的 src，例如：

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();

回答by Jonathan

A much easier way than all of these answers is just replacing the whole src. This works for all modals and you can adjust iframe class as required.

比所有这些答案更简单的方法是替换整个 src。这适用于所有模态，您可以根据需要调整 iframe 类。

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

回答by Lee Harris

Had a modal with many videos. Updated the code by @guillesalazar to close multiple videos in the modal.

有一个包含许多视频的模式。@guillesalazar 更新了代码以关闭模态中的多个视频。

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });