Bootstrap模态和Youtube:自动播放和关闭时停止

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个模态时,这会变得臃肿!有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它,同时仍然只在目标模态中修改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. 使用"&autoplay = 1"附加现有src属性以启动视频.
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);
});

Answer 2

这是一个JS Fiddle。

我添加了一些渐进增强功能，因此如果 JS 失败，您将被带到 YouTube 视频。

该链接需要一个数据视频嵌入和一个目标，我们将在其中添加视频，其他一切都应该正常工作。示例中的事件适用于 Bootstrap 3 模式，如果您使用 2.X，它将只是“隐藏”。

$('[data-provider="modal-video"]')
   .on('click', function (evt) {
      evt.preventDefault();
      var $target = $(evt.currentTarget),
          videoSrc = $target.data('video-embed'),
          $modal = $($target.data('target'));

      $modal
        .find('iframe').attr('src', videoSrc)
        .end()
        .on('hide.bs.modal', function () {
            $(this)
                .off('hide.bs.modal')
                .find('iframe').attr('src', '');
        })
        .modal('show');
});