title: How to pause Vimeo video in Javascript?
body: <p>I'm gonna make this as short as possible so that I can get a quick fix.</p>
  
  <p>I have a lightbox that opens up with a vimeo video. There is a button in the top right of the screen to remove the lightbox, however the vimeo video still plays in the background and you can hear it, whilst not seeing it. I need to be able to pause the vimeo video while also hiding the lightbox.</p>
  
  <p>Here is the code I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var lightbox = 
          '&lt;div id="lightbox"&gt;' +
          '&lt;a&gt;&lt;p id="click-to-close"&gt;Click to close&lt;/p&gt;&lt;/a&gt;' +
          '&lt;div id="content"&gt;' + //insert clicked link's href into img src
            ' &lt;iframe id="video" src="https://player.vimeo.com/video/131429700?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;' +
          '&lt;/div&gt;' +  
        '&lt;/div&gt;';
  
  
  
    $("#click-to-close").click(function() {
     $('#lightbox').hide();
  
            var iframe = document.getElementById('video');
  
  // $f == Froogaloop
  var player = $f(iframe);
  
  
  var pauseButton = document.getElementById("click-to-close");
  pauseButton.addEventListener("click", function() {
    player.api("pause");
  });
       
      
    
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there anything that I am missing/doing wrong?</p>