vimeo controls hide/show when custom fixed button clicking without autoplay

i have problem that i try to make popup inside swiper slide and vimeo players in tab.

it has 4 content boxes each tab inside.

first of all i want to solve this another content when i click the buttons(next or prev) going to change content and vimeo/slide too.

and changed another vimeo player will be initial start point and hide controls. it can be only customed buttons appear. when it come back(push the prev btn), it also initiated before i visited and click the button. the vimeo controls showing.

how can i write the code? or any vimeo handling method, event something? i have not clearly understand vimeo docs even i try do my best. because im foreigner actuallyTT

please help. i just try src attr change it work apart only(not whole mechanism) here is my code that i tried.

thank you

    const playBtn = $('#btn-play');

    const selectPlayers = ['212690002', '193832453', '18237484', '304719209', '108980280'];
    
    const iframe = $('iframe');
    const player = new Vimeo.Player(iframe);

    player.on('play', function() {
      console.log('played the video!');
    });

    let selPnum = 0;
    let selFrameUrl = iframe.attr('src');
    
    $('.desc_pagination').on('click', function(e) {
      playBtn.fadeIn(200);
      selPnum = $(this).hasClass('next') ? (selPnum + 1) % selectPlayers.length : (selPnum + selectPlayers.length - 1) % selectPlayers.length;
      vimeoRender();
    });
    
    playBtn.on('click', function(e) {
      console.log('1. Play setting start');
      e.stopImmediatePropagation();
      
      let useCtr = selFrameUrl.replace(/(controls=0)/g, function(vl){
        switch(vl){ case "controls=0": return "controls=1"; }
      });

      iframe.attr('src', selFrameUrl);
      
      iframe.on('load', ()=> {
        playBtn.fadeOut(200);
        setTimeout(()=> {
          player.play();
        }, 500)
      });

      
    });

    function vimeoRender() {
      let vurl = selFrameUrl.match(/player.vimeo.com/video/?([0-9]+)/i);
      selFrameUrl = selFrameUrl.replace(vurl[1], selectPlayers[selPnum]);
      iframe.attr('src', selFrameUrl);
    }

html :

<!-- inner video -->
<div class="video">
    <iframe src="https://player.vimeo.com/video/212690002?rel=0&title=0&showinfo=0&byline=0&controls=0&portrait=0&autopause=1&" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
    <button id="btn-play"><img src="images/main/video_play.png" alt="play"></button>
</div>
<!-- //inner video -->

try research vimeo docs

https://github.com/vimeo/player.js#embed-options
https://developer.vimeo.com/api/guides/start

and find googling