title: Add a class to a div when a vimeo embed is playing
body: <p>I want to add a class to a div when a vimeo embed is playing. I found some info on <a href="http://developer.vimeo.com/player/js-api" rel="nofollow">Vimeo API</a>. <a href="http://jsfiddle.net/HfwWY/2557/" rel="nofollow">This is the fiddle</a> i ended up with. It works on the left video, when you play it the tester div turns red, when you pause it it turns yellow. How could i change the code so that it would work for both video's? Or to be more specific, on any number of vimeo embeds?</p>
  
  <p>Just for completeness, heres the code im using:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;iframe id="player1" 
      src="http://player.vimeo.com/video/27855315?api=1&amp;player_id=player1"
      width="400" height="225" frameborder="0"
      webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;
  &lt;/iframe&gt;
  
  &lt;iframe id="player2"
      src="http://player.vimeo.com/video/27855375?api=1&amp;player_id=player2"
      width="400" height="225" frameborder="0"
      webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;
  &lt;/iframe&gt;
  
  &lt;p&gt;Video status: &lt;span class="status"&gt;...&lt;/span&gt;&lt;/p&gt;
  &lt;div id="tester"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#tester{
    background-color:yellow;
    width:100px;
    height:100px;
  }
  
  #tester.playing{
    background-color:red;
  }
  </code></pre>
  
  <p>JS/jQuery:</p>
  
  <pre><code>var iframe = $('#player1')[0],
      player = $f(iframe),
      status = $('.status');
  
  // When the player is ready, add listeners for pause, finish, and playProgress
  player.addEvent('ready', function() {
      status.text('ready');
  
      player.addEvent('pause', onPause);
      player.addEvent('finish', onFinish);
      player.addEvent('playProgress', onPlayProgress);
  });
  
  // Call the API when a button is pressed
  $('button').bind('click', function() {
      player.api($(this).text().toLowerCase());
  });
  
  function onPause(id) {
      $('#tester').removeClass('playing');
  }
  
  function onFinish(id) {
      $('#tester').removeClass('playing');
  }
  
  function onPlayProgress(data, id) {
      $('#tester').addClass('playing');
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Im adding the vimeo's dynamically to an empty iframe. This is where the problem arises of the solution not working anymore. To clarify things ive putted 2 fiddles together.</p>
  
  <p><a href="http://jsfiddle.net/HfwWY/2564/" rel="nofollow">This fiddle</a> works. When you play the video the yellow tester div turns red.</p>
  
  <p><a href="http://jsfiddle.net/HfwWY/2563/" rel="nofollow">This fiddle</a> doesnt work. First click the green "video 1" button, then the player shows. But when you press play on it the yellow tester div doesnt turn red.</p>
  
  <p>I cant figure out what the problem is. When i inspect element, both iframes look exactly the same when they are rendered. Whats the difference and why doenst it work when i load the src dynamically?</p>