Pausing all Vimeo videos with JavaScript?

Question

I am trying to pause all Vimeo videos when any link is clicked. I am building a scroller and don't want the videos to continue playing when scrolling to the next item.

I am able to pause one of the videos - can anyone see what I am doing wrong?

var iframe = $('.vimeovideo')[0, 1],
    player = $f(iframe),
    status = $('.status');

$('a').bind('click', function () {
    player.api("pause");
});

http://jsfiddle.net/HfwWY/1975/

Thanks

Answer 1

I had success by using jQuery's each() to iterate through and pause each video's player.

var iframes = $('.vimeovideo'),
    status  = $('.status');

$('a').bind('click', function() {
  iframes.each(function() {
    var player = $f(this);
    player.api("pause");
  });
  return false;
});

a {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//a.vimeocdn.com/js/froogaloop2.min.js"></script>
<a href="#">PAUSE</a>
<iframe class="vimeovideo" src="//player.vimeo.com/video/67021810?title=0&amp;byline=0&amp;portrait=0&amp;color=C0C000" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe class="vimeovideo" src="//player.vimeo.com/video/78298758?title=0&amp;byline=0&amp;portrait=0&amp;color=C0C000" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

View on JSFiddle