title: Vimeo API: Play button and multiple videos
body: <p>I'm having some trouble. I just discovered that you can control vimeo with js, and now I'm trying to create a play button that will start playing a vimeo video.</p>
  
  <p>The problem I'm having is that I have multiple videos on the same page. I took the example/playground file (from here <a href="http://player.vimeo.com/playground" rel="nofollow">http://player.vimeo.com/playground</a> / <a href="https://github.com/vimeo/player-api/tree/master/javascript" rel="nofollow">https://github.com/vimeo/player-api/tree/master/javascript</a>) and removed the functionality that I don't require, however, I can't understand how I connect the play button with a certain video.</p>
  
  <p>This is what I have so far</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;amp;player_id=player_1" width="540" height="304" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;div class="intro"&gt;
       &lt;span class="hide"&gt;Play 1&lt;/span&gt;
  &lt;/div&gt;
  &lt;iframe id="player_2" src="http://player.vimeo.com/video/7100569?api=1&amp;amp;player_id=player_2" width="540" height="304" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;div class="intro"&gt;
      &lt;span class="hide"&gt;Play 2&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>            var vimeoPlayers = document.querySelectorAll('iframe'),
                  player;
  
              for (var i = 0, length = vimeoPlayers.length; i &lt; length; i++) {
                  player = vimeoPlayers[i];
                  $f(player).addEvent('ready', ready);
              }
  
  
              function addEvent(element, eventName, callback) {
                  if (element.addEventListener) {
                      element.addEventListener(eventName, callback, false);
                  }
                  else {
                      element.attachEvent(eventName, callback, false);
                  }
              }
  
  
              function ready(player_id) {
                  // Keep a reference to Froogaloop for this player
                  var container = document.getElementById(player_id).parentNode.parentNode,
                      froogaloop = $f(player_id);
  
                  function setupSimpleButtons() {
                      var buttons = container.querySelector('div.intro'),
                          playBtn = buttons.querySelector('.hide');
  
                      // Call play when play button clicked
                      addEvent(playBtn, 'click', function() {
                          froogaloop.api('play');
                      }, false);
  
  
  
                  }
  
                  setupSimpleButtons();
              }
          })();
  </code></pre>
  
  <p>If I have code that is unnecessary please help me remove it.
  Many thanks.</p>