title: Bootstrap modal and multiple vimeo videos
body: <p>I have a page that has multiple videos embedded. Each link opens up the video in bootstraps modal. The problem I have is if I close the modal the video is still playing.</p>
  
  <p>I found a script that will force this to stop but then my next issue was the page has multiple videos. So I have tried to capture the id of each video into a variable when clicked. </p>
  
  <p>Independently the two scripts I have work, bit what am I missing to get them combined?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a class="video" href="#" data-toggle="modal" data-target="#video1"&gt;Video 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="video" href="#" data-toggle="modal" data-target="#video2"&gt;Video 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="video" href="#" data-toggle="modal" data-target="#video3"&gt;Video 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="video" href="#" data-toggle="modal" data-target="#video4"&gt;Video 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the jQuery I have to stop the video from playing:</p>
  
  <pre><code>$('#video1').on('hidden.bs.modal', function (e) {
      $('#video1 iframe').attr("src", jQuery("#video1 iframe").attr("src"));
  });
  </code></pre>
  
  <p>And here is the variable I set up to capture the ID of the clicked link so I don't have to add each ID manually to the script above:</p>
  
  <pre><code>$('a.video').click(function(e) {
      editid = $(this).attr("data-target");
      alert(editid);
  });
  </code></pre>
  
  <p>What I am struggling to find out is how to add the variable and get it to work in the first jQuery part that stops the video from playing on close.</p>
  
  <p>Thanks</p>