Twitter Bootstrap Modal stop Youtube video

Question

I'm very new to javascript and trying to use Twitter bootstrap to get a good looking website up and running quickly. I know this has something to do with jquery, but I'm not sure how to stop my video when I push the close button or the close icon.

Can someone explain how I can get my video to stop playing because even when I close the window, I can still hear it in the background.

<!-- Button to trigger modal -->     <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>  <!-- Modal -->   <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">     <div class="modal-header">       <button type="button" class="close" data-dismiss="modal" aria>×</button>       <h3 id="myModalLabel">I am the header</h3>     </div>     <div class="modal-body">       <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>     </div>     <div class="modal-footer">       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>     </div>   </div> 

Answer 1

There is a nice proper way of doing this - see the comments in the approved answer to this post.

Couldn't get that working first time round myself though, and was in a rush, so I did a rather horrible hacky bit of code which does the trick.

This snippet 'refreshes' the src of the embed iframe, causing it to reload:

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {         jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src")); }); 

Answer 2

I know I'm 2+ years late, but since then, a couple of things have changed, with B3 the new way to perform this out of the box is this:

$("#myModal").on('hidden.bs.modal', function (e) {     $("#myModal iframe").attr("src", $("#myModal iframe").attr("src")); }); 

Have fun with Bootstrap!