Bootstrap modal and multiple vimeo videos

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.

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.

Independently the two scripts I have work, bit what am I missing to get them combined?

HTML

<ul>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video3">Video 3</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video4">Video 4</a></li>
</ul>

This is the jQuery I have to stop the video from playing:

$('#video1').on('hidden.bs.modal', function (e) {
    $('#video1 iframe').attr("src", jQuery("#video1 iframe").attr("src"));
});

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:

$('a.video').click(function(e) {
	editid = $(this).attr("data-target");
	alert(editid);
});

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.

Thanks

You could wire up the handler on the first click to persist and pass along the ID. Something like this:

var selector = $(this).attr("data-target");
$(selector).data("HasBeenClicked", true);

But you probably don't need to go so far. You can just expand the way in which you're listening for modals to close. As soon as any modal has closed, check to see if it has an iFrame inside of it. If so, run your script to stop it from playing.

Like this:

$('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
});

Here's a full example in Plunker

Also, have you looked at the Javascript API. You might be able to find a way to actually pause so you didn't lose the buffering or position of the video in case someone comes back to it.

Full code from Plunker - Won't run on Snippets because of Sandbox

Also, here's some even shorter javascript for the handler:

<!-- language: lang-js -->

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find("iframe")[0].src += "";
});

Sample HTML:

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<ul class="nav" >
  <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
  <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
</ul>

<div class="modal fade" id="video1">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video 1</h4>
      </div>
      
      <div class="modal-body">
        
        <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="video2">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video 2</h4>
      </div>
      
      <div class="modal-body">
        
        <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        
      </div>
    </div>
  </div>
</div>