Bootstrap Modals& YouTube:自动播放并在关闭时停止

打开Twitter Bootstrap模式后,我需要能够自动播放youtube视频,然后在关闭时停止播放该视频.

I need to be able to autoplay a youtube video when a Twitter Bootstrap modal is opened and subsequently stop that video on close.


I know this question has been asked before, but the answers I can find would lead to a LOT of javascript code for a page that contains MANY videos and I am trying to cut down on the bloat. So far I have the following working for individual videos, but the issue is that each modal and each video must have this javascript code repeated with the proper variables.

$('#vidThumbnail-1').click(function () {
        var src = '';
        $('#vid1 iframe').attr('src', src);

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


<div id="vidThumbnail-1"><img src="" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

当您有20个视频和20个模态时,这会肿! 有没有一种方法可以利用数据属性方法来启动内置到内部引导程序的模式,而不是单独调用它,同时仍然仅在目标模式内修改iframe src?打开模态的链接将是:

This gets bloated when you have 20 videos and 20 modals! Is there a way to utilize the Data Attributes method of initiating a modal built-into bootstrap rather than call it individually, while still modifying the iframe src within only the target modal? The link to open the modal would then be:

<a href="#vid1" role="button" data-toggle="modal">
<img src=""></a>


  1. 读取目标模式中iframe的现有src属性(将其设置为变量吗?)
  2. 在现有src属性后附加& autoplay = 1"以启动视频.
  3. 关闭模态后,将src属性替换为原始属性(可以通过上面的按钮进行操作,就像上面的按钮一样).


This way I would not need to write script for each individual modal, saving a lot of time AND bloated JS. However, I have no idea where to start modifying the bootstrap.js to accomplish this and I'm not experienced in JS (or any) programming. Thanks for any help you can give me!

 1 条回答