Làm thế nào tôi có thể khởi chạy và đóng jQuery Twitter Bootstrap Modal bằng một video trên YouTube?

Question

Tôi cần một bản demo đơn giản về cách khởi chạy và đóng video YouTube trong một Twitter Bootstrap Modal từ JavaScript (thay vì nhấp vào thẻ liên kết).

Cho đến giờ tôi có thể khởi chạy ứng dụng này tốt, nhưng khi đóng nó vẫn tiếp tục phát trong nền.

Dưới đây là html của tôi:

<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&rel=0&autohide=1&showinfo=0&autoplay=1'; 
    $('#myModal').modal('show'); 
    $('#myModal iframe').attr('src', src); 
}); 

Và một jsfiddle: http://jsfiddle.net/VtKS8/5/

gì tiếp theo?

Answer 1

Vâng, có vẻ như tất cả những gì tôi cần làm là xóa thuộc tính src trên nhấp chuột vào nút.

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

JSFiddle: http://jsfiddle.net/VtKS8/6/

Answer 2

Đây là phiên bản cập nhật cho bootstrap 3 sử dụng được xây dựng trong móc bootstrap

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