title: Using froogaloop for a custom play button that overlays vimeo video and fades out when clicked?
body: <p>I'm not great with javascript. I was wondering if it was possible to create something similar to the link below with regards to the play button but I want the play button to overlay the video and when the button is clicked it will fade out and play the video.</p>
  
  <p><a href="http://jsfiddle.net/bdougherty/HfwWY/" rel="nofollow">http://jsfiddle.net/bdougherty/HfwWY/</a></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;p&gt;&lt;button&gt;Play&lt;/button&gt;
  </code></pre>
  
  <p>JS</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) {
  status.text('paused');
  }
  
  function onFinish(id) {
  status.text('finished');
  }
  
  function onPlayProgress(data, id) {
  status.text(data.seconds + 's played');
  }
  </code></pre>
  
  <p>Many thanks.</p>