How to stop Vimeo from playing when modal is closed by clicking off

Question

I have a Vimeo embedded into a modal. It stops playing the video when I click on the 'close' button. But it doesn't stop playing the video when I click off the model (which causes the modal to close and the video to play in the background).

I have tried a few answers from similar questions and can't seem to get them to work for me. I am fairly new to JS so any help is appreciated.

So, how would I make the video stop whenever the modal is closed (whether by clicking off or by close button)?

autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-theVideo"),
      videoSRCauto = videoSRC + "?autoplay=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function() {
      $(theModal + ' iframe').attr('src', videoSRC);
    });
  });
}

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro Video
  </a>
  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div>
            <iframe width="100%" height="350" src=""></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I think [this](http://stackoverflow.com/questions/22207377/disable-click-outside-of-bootstrap-model-area-to-close-modal) is what you're looking for. — Jespertheend, Feb 24 '17 at 19:00
Not exactly what i was hoping to get - but it works. Thank you — becca, Feb 24 '17 at 19:03

score 2 · Accepted Answer · answered Feb 24 '17 at 19:46

Instead of checking for when modal close button is clicked, use hide.bs.modal event. Working solution

(function(){
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-theVideo"),
      videoSRCauto = videoSRC + "?autoplay=1";
   
    $(theModal + ' iframe').attr('src', videoSRCauto);
      
 $(theModal).on('hidden.bs.modal', function (e) {
  $(theModal + ' iframe').attr('src', videoSRC);
 });   
   
  });
}())

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro Video
  </a>
  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div>
            <iframe width="100%" height="350" src=""></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

How to stop Vimeo from playing when modal is closed by clicking off

1 Answers1