如何使用YouTube视频启动和关闭jQuery Twitter Bootstrap Modal？

我需要一个简单的演示，了解如何通过JavaScript（而不是锚点标记点击）在Twitter Bootstrap Modal中启动和关闭YouTube视频。如何使用YouTube视频启动和关闭jQuery Twitter Bootstrap Modal？

到目前为止，我可以启动它就好了，但关闭它一直在后台播放。

这里是我的html：

<div id="myModalThumbnail"><img src="http://placehold.it/250x150&text=Video%20Thumbnail"> 
</div> 

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

的Javascript：

$('#myModalThumbnail').click(function() { 
    var src = 'http://www.youtube.com/v/KVu3gS7iJu4&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1'; 
    $('#myModal').modal('show'); 
    $('#myModal iframe').attr('src', src); 
});

并有jsfiddle：http://jsfiddle.net/VtKS8/5/

下一步是什么？

来源

2012-12-17 Ryan

好吧，看起来像我需要做的是删除按钮点击src属性。

$('#myModal button').click(function() { 
    $('#myModal iframe').removeAttr('src'); 
});

的jsfiddle：http://jsfiddle.net/VtKS8/6/

来源

2012-12-17 20:30:46 Ryan

谢谢！我一直在试图获得同样的东西，并通过iFrame API控制视频，并且遇到浏览器不兼容问题。这感觉就像一个副作用，但迄今为止这个技巧非常好。 – Pod

但是当你按转义它仍然播放 –

对于'esc'，添加如下内容：'$（document）.keydown（function（e）{if（e.keyCode === 27）{$（'＃myModal iframe '）.removeAttr（'src'）;}}）;'看到这个更新的小提琴：http://jsfiddle.net/VtKS8/33/适用于我。 – Ryan

这是更新版本的引导3使用内置自举钩

<script> 
    $(document).ready(function() { 
     $('#audiomodal').on('hidden.bs.modal', function() { 
      $("audio").attr('src', ''); 
     }); 
    }); 
</script>

来源

2013-11-02 00:31:30 Sam

任何机会的小提琴或网页的网址与此工作？最好的祝愿，李。 – user1070143

如何使用YouTube视频启动和关闭jQuery Twitter Bootstrap Modal？

回答

相关问题