title: How to stop Vimeo from playing when modal is closed by clicking off
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>So, how would I make the video stop whenever the modal is closed (whether by clicking off or by close button)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
      });
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-5"&gt;
    &lt;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"&gt;
      &lt;i class="fa fa-video-camera"&gt;&lt;/i&gt; Intro Video
    &lt;/a&gt;
    &lt;div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-body"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
            &lt;div&gt;
              &lt;iframe width="100%" height="350" src=""&gt;&lt;/iframe&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>