How to pause vimeo in a dynamic iframe?

Question

I have a set of items, when I click on one of the, I am loading an iframe inside. When I click on another item, I am closing any opened item and loading its relative iframe with vimeo. However, I need to pause the previous vimeo as this could be playing.

This is what I did but it is not stopping any other playing vimeo

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  var videoSpan =  $(this).find("span.video");
  var url = videoSpan.data("vimeoid");
  if(url){
    var tokens = url.split("/");
    var id = tokens[3];
    var iframe = $('<iframe/>', {
     'frameborder' : 0,
     'class' : 'tide embed-responsive-item',
     'src' : 'http://player.vimeo.com/video/'+ id + '?api=1&player_id=player1 webkitAllowFullScreen  mozallowfullscreen allowFullScreen',
     load:function(){
       var iframeB = $('#player1')[0];
       var player = $f(iframeB);
       player.addEvent('pause', onPause);
      }
    });
    videoSpan.replaceWith(iframe);
  }
});

I have inserted their api <script src='//f.vimeocdn.com/js/froogaloop2.min.js'></script>

Console says Uncaught ReferenceError: onPause is not defined

This is what they say about their api use

Answer 1

Resolved it like this, basically I empty the span where I load the iframe, and I reload it each time.

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  $(".item span.video").empty();
  var videoSpan =  $(this).find("span.video");
  var url = videoSpan.data("vimeoid");
  if(url){
    var tokens = url.split("/");
    var id = tokens[3];
    var iframe = $('<iframe/>', {
      'frameborder' : 0,
      'class' : 'tide embed-responsive-item',
      'src' : 'http://player.vimeo.com/video/'+ id + '?api=1 webkitAllowFullScreen  mozallowfullscreen allowFullScreen'
    });
    videoSpan.html(iframe);
  }
});