How can I use the new (2016) Vimeo javascript API to start a video?

Question

Vimeo has a new (2016) javascript API. I'm looking for a basic example of it in use to start and stop a video by javascript when clicking something on the page.

I found those two articles covering the topics, but both are about the old frogaloop api:

• Vimeo player api - play video with javascript
• https://css-tricks.com/play-button-youtube-and-vimeo-api/

Answer 1

To start a Vimeo video via the new javascript API you simply have to include the API in your page and then execute the play method. See example below:

<!-- Load the video iframe. Be sure to not forget to enable the api (api=1) -->
<iframe src="https://player.vimeo.com/video/87982573?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<!-- When clicking this text the video will start -->
<p id='start'>click to start</p>

<!-- Including jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Including Vimeo player javascript API -->
<script src="https://player.vimeo.com/api/player.js"></script>
		
<script>
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);
  // Execute the `play` method of the API when something with id start is clicked
  $('#start').click( function() {
    player.play();
  });
</script>

And be sure to have a look at Vimeos example page for the new player API.