title: Vimeo JavaScript API add event listener to all iframes on the page
body: <p>Been messing around with <a href="https://github.com/vimeo/player-api/tree/master/javascript" rel="nofollow">Froogaloop</a>, Vimeo's JavaScript API, and am trying to add a class to the Vimeo iFrame that is currently playing. Seems simple enough, using the API's events, but I can't seem to wrap my head around it. Here's what I've got so far:</p>
  
  <p>The code below is a simplified version of <a href="http://developer.vimeo.com/player/js-api" rel="nofollow">their example</a>. While it's not causing any errors in my console, I'm not getting any of the logs (and therefore not getting the classes). Am I missing something?</p>
  
  <p>Thanks for your help!</p>
  
  <pre><code>var iframe = $('article.video iframe')[0],
      player = $f(iframe);
  
  player.addEvent('ready', function() {
      player.addEvent('play', on);
      player.addEvent('pause', off);
      player.addEvent('finish', off);
  });
  
  function on(id) {
      console.log('playing');
      player.addClass('playing');
  }
  function off(id) {
      console.log('not playing');
      player.removeClass('playing');
  }
  </code></pre>
  
  <p>UPDATE</p>
  
  <hr>
  
  <p>The issue definitely has to do with the variables. <code>Player</code> tells Froogaloop which iframe to work with, <code>iframe</code> identifies which html object that is. So I suppose the issue is how I can identify all the iframes on the page and then feed Froogaloop the appropriate iframe when one is activated.</p>