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

Answer 1

You should empty iframe src first and then set it up again.

So my working answer:

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

October, 2014. For Bootstrap 3.

Answer 2

Here, I generalize @guillesalazar's answer.

This will reset any iFrame within any bootstrap modal (when the modal is closed):

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

Add this to your layout and you're set.

UPDATE: Code modified for modals with multiple iFrames.

Answer 3

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 4

A much easier way than all of these answers is just replacing the whole src. This works for all modals and you can adjust iframe class as required.

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

Answer 5

$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})

Answer 6

 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});