我需要能够在打开 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 个模态时，这会变得臃肿！有没有办法利用 Data Attributes 方法来启动内置引导模式的模式，而不是单独调用它，同时仍然只在目标模式中修改 iframe src？打开模式的链接将是：
<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>
然后：
- 读取目标模式中 iframe 的现有 src 属性（将其设置为变量？）
- 将现有的 src 属性附加到“&autoplay=1”以启动视频。
- 关闭模式时将 src 属性替换为原始属性（通过上面的按钮特别好）。
这样我就不需要为每个单独的模态编写脚本，节省大量时间和臃肿的 JS。但是，我不知道从哪里开始修改 bootstrap.js 来完成此操作，而且我在 JS（或任何）编程方面没有经验。感谢你给与我的帮助！