Video continues running at close modal

Question

I have a bootstrap modal that opens automatically when the page loads. Inside this modal there is only one video. However, when this video runs and the modal is closed the video continues running. How do I stop, when closing the modal stop running the video (youtube iframe).

<div class="modal fade" id="testemodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">xxx</h4>
          </div>
          <div class="modal-body">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/NHqZKNfAVa0" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="modal-footer">
            <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
            <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Answer 1

If you have multiple video modes, the best way to deal with it is this:

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

This goes through all the iframes in your modals and redefines them, instead of replacing the src of all your iframe for the first video in your modal set.

Answer 2

Thus:

$('#youriframeid').attr('src',$('#youriframeid').attr('src'));

If you do a ". remove()" and then open the modal again, your video will no longer be there. Depending on your need also meets, but does not seem to be the most suitable, unless you create the modal every time you open it.

Answer 3

function closeModal() {
//código para dar stop no vídeo aqui
//use $('#youriframeid').remove(); para forçar a remoção do html do iFrame
//caso queira alguma alternativa para parar o vídeo
$('#youriframeid').remove();

//código para fechar a modal aqui
$("#testemodal").modal("hide");
}

Now just run this function when you need to close the modal. I hope I contributed.