How to stop Vimeo video when Bootstrap modal is dismissed?

Question

I have a Vimeo modal that works wonderfully and - after some effort - I've gotten the video to stop when the modal is closed via the 'X' button. However, since I put the close function on the 'X' button, if the user clicks away from the video to close the modal rather than using the button, the video keeps playing.

Here is the HTML where I call the stopVideo() function with onclick:

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

And here is the Javascript function that stops the video:

<script>
 function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
}
</script>

So, how can I alter the function to apply not to the specific close button, but to any instance where the modal loses focus such as clicking away from the video?

I'm a novice, so go easy on me. Thanks in advance!

EDIT 1:

I've changed the script to the following:

<script>
    function stopVideo(){
     var $frame = $('iframe#nofocusvideo');

    // saves the current iframe source
    var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open
    $frame.attr('src', vidsrc);
    }

    $('#promo-video').on('hidden.bs.modal', function (e) {
        stopVideo();
    })
</script>

The stopVideo() function is not being called. Any idea what I'm doing wrong?

EDIT 2: Here's the code for the modal in question:

<!-- VIDEO MODAL -->
    <div class="modal fade" id="promo-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-video">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="nofocusvideo" src="https://player.vimeo.com/video/180565514?api=1&player_id=vimeoplayer" name="vimeoplayer" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- End Video Modal -->

Answer 1

Here's the working code for it using the default bootstrap id's. Not too sure why yours isn't working.

function stopVideo() {
  var $frame = $('iframe#nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#myModal').on('hidden.bs.modal', function(e) {
  stopVideo();
})

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <iframe id="nofocusvideo" src="https://player.vimeo.com/video/182738685" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen 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>
  </div>
</div>

Answer 2

A solution that work for me is reload the modal contents:

    $("#modal-video").on("hidden.bs.modal", function () {
        var url = $('#video-frame').attr('src');
        $('#video-frame').attr('src', '');
        $('#video-frame').attr('src', url);
    });