jquery - Bootstrap 模态框和 YouTube : Autoplay and Stop on Close

Question

我需要能够在 Twitter Bootstrap 模式打开时自动播放 YouTube 视频，并随后在关闭时停止该视频。

我知道这个问题之前已经被问过，但我能找到的答案会导致包含许多视频的页面出现大量 javascript 代码，我正在努力减少膨胀。到目前为止，我对各个视频进行了以下工作，但问题是每个模式和每个视频都必须使用正确的变量重复此 JavaScript 代码。

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1';
        $('#vid1').modal('show');
        $('#vid1 iframe').attr('src', src);

      //Fit Vids Implamented Below for Mobile Compatibility
        $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
        $(".flex-video").fitVids();
    });
$('#vid1 button').click(function () {
        $('#vid1 iframe').removeAttr('src');
    });

HTML:

<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>

当您有 20 个视频和 20 个模态时，这会变得臃肿!有没有办法利用数据属性方法来启动内置的模态 Bootstrap ，而不是单独调用它，同时仍然仅在目标模态中修改 iframe src？打开模式的链接将是:

<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>

然后:

1. 读取目标模态中 iframe 的现有 src 属性(将其设置为变量？)
2. 在现有 src 属性后附加“&autoplay=1”以启动视频。
3. 关闭模态框时将 src 属性替换为原始属性(通过像上面这样的按钮就可以了)。

这样我就不需要为每个单独的模态编写脚本，节省了大量时间和臃肿的 JS。但是，我不知道从哪里开始修改 bootstrap.js 来完成此任务，而且我在 JS(或任何)编程方面没有经验。感谢您给我的任何帮助!

Answer 1

我的解决方案:

• 请勿手动将 &autoplay=1 添加到 iframe src

然后添加此脚本:

var videoSrc = $("#myModal iframe").attr("src");

$('#myModal').on('show.bs.modal', function () { // on opening the modal
  // set the video to autostart
  $("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
  // stop the video
  $("#myModal iframe").attr("src", null);
});