JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://player.vimeo.com/api/player.js"></script>

<iframe class="sample" src="https://player.vimeo.com/video/287527493"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<iframe class="sample" src="https://player.vimeo.com/video/288559456"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<button id="play">再生</button>
<button id="pause">一時停止</button>

CSS

iframe {
  max-width: 100%;
}
#play {
  display: none;
}

JavaScript

$(function() {

  $('iframe').each(function() { 
    
    // VimeoのIDを全て配列に入れておく
    var vimeo_ids = [];
    var vimeo_id = $(this).attr('src').match('[0-9]{9}');
    vimeo_ids.push(vimeo_id);
    
    // 配列のIDを制御のためのoptionsへ代入
    var options = {
        id: vimeo_ids, 
    };
  
    // opptionsについて再生と停止を制御
    var player = new Vimeo.Player($('.sample'), options);
    $('#play').on('click', function() {
        player.play().then(function() {
            console.log('再生');
        }).catch(function(error) {
            console.log(error);
        });
        $(this).css('display','none');
        $('#pause').css('display','block');
    });
    $('#pause').on('click', function() {
        player.pause().then(function() {
            console.log('一時停止');
        });
        $(this).css('display','none');
        $('#play').css('display','block');
    });
    
  });  
    
});