vimeovimeo-api

2 vimeo videos in the same page with respective play and pause button

I am able to use a button to play and pause the video only if there is one Vimeo video in the page. The issue that happens is when I click on the play or pause button of the 2nd video, the video that plays and pauses is the first video. Not sure how to choose the correct video that needs to be played when clicking their respective buttons. Can anyone help me about this?

Here is a link for codepen https://codepen.io/Beldion/pen/GRvQRRr

$( document ).ready(function() {
     
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);
  
  $('#btnPlay').click(function() {
    player.play();
    });
  
  $('#btnPause').click(function() {
    player.pause();
    });
  
  $('#btnPlay2').click(function() {
    player.play();
    });
  
  $('#btnPause2').click(function() {
    player.pause();
    });
  
});
<div>
  <div class="embed-container">

     <iframe src="https://player.vimeo.com/video/544050102" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>

  </div>
  <button id="btnPlay">Play</button><button id="btnPause">Pause</button>
</div>

<div>
  <div class="embed-container">

     <iframe src="https://player.vimeo.com/video/544050102" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>

  </div>
  <button id="btnPlay2">Play</button><button id="btnPause2">Pause</button>
</div>

Solution

  • You need separate players for that:

    $( document ).ready(function() {
     
  var iframe = document.getElementById('iframe1');
  var iframe2 = document.getElementById('iframe2');

  var player = new Vimeo.Player(iframe1);
  var player2 = new Vimeo.Player(iframe2);

  $('#btnPlay').click(function() {
    player.play();
    });
  
  $('#btnPause').click(function() {
    player.pause();
    });
  
  $('#btnPlay2').click(function() {
    player2.play();
    });
  
  $('#btnPause2').click(function() {
    player2.pause();
    });
  
});