How To Pause Vimeo Video In Javascript?

I'm gonna make this as short as possible so that I can get a quick fix. I have a lightbox that opens up with a vimeo video. There is a button in the top right of the screen to remo

Solution 1:

You are adding an eventListener in the click handler which will hide your button.

var lightbox =
  '<div id="lightbox">' +
  '<a><p id="click-to-close">Click to close</p></a>' +
  '<div id="content">' +
  ' <iframe id="video" src="https://player.vimeo.com/video/131429700?autoplay=1&title=0&byline=0&portrait=0?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>' +
  '</div>' +
  '</div>';



$("#click-to-close").click(function() {
  // here you hide the pauseButton's container
  $('#lightbox').hide();

  var iframe = document.getElementById('video');
  // $f == Froogaloopvar player = $f(iframe);

  var pauseButton = document.getElementById("click-to-close");
  // it is now hidden, we can't access it anymore...
  pauseButton.addEventListener("click", function() {
    player.api("pause");
  });
});

So you have two solutions :

• append your button outside the #lightbox element, which seems odd, since the hidden video will still be playing,
• directly call player.api("pause"); in the first click handler

.

$("#click-to-close").click(function() {
  $('#lightbox').hide();
  var iframe = document.getElementById('video');
  // $f == Froogaloopvar player = $f(iframe);
  player.api("pause");
});