jquery – Bootstrap Modals和Youtube：自动播放和关闭时停止

我需要能够在打开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("

HTML：

bed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen>dismiss="modal" aria-hidden="true">×

当你有20个视频和20个模态时,这会变得臃肿！
有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它,同时仍然只在目标模态中修改iframe src？打开模态的链接将是：

然后：

>读取目标模态中iframe的现有src属性(将其设置为变量？)
>使用“& autoplay = 1”附加现有src属性以启动视频.
>关闭模态后,将src属性替换为原始属性(通过按钮,特别是上面的按钮就可以了).

这样我就不需要为每个单独的模态编写脚本,节省了大量的时间和臃肿的JS.但是,我不知道从哪里开始修改bootstrap.js来实现这一目标,而且我没有经验JS(或任何)编程.感谢你给与我的帮助！

最佳答案

我的解决方案

>不要手动为iframe src添加& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;

然后添加此脚本：

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);
});