Overlay play button doesn’t show/disappears (Vimeo iframe)

Stackoverflow forced me to copy/paste my code from CodePen but as you can it’s not working properly here so please go to CodePen to see what I mean.

This is my CodePen and I’m in a pickle…

It’s all about my OVERLAY PLAY BUTTON.

When loading the page for the first time, my Vimeo iframe works ok.

a) You can press ‘play’/’pause’ Vimeo button and my OVERLAY PLAY BUTTON shows/disappears

b) You can click wherever you want to play/pause and my OVERLAY PLAY BUTTON shows/disappears

c) You can click on my OVERLAY PLAY BUTTON and it’ll start video (and disappears itself) and when you click one more time, it’s again visible and pauses video.
And now the problem: When you go from main video and click for example on VIDEO ONE (I’m replacing .src to a new video):

a) You can press ‘play’/’pause’ Vimeo button but my OVERLAY PLAY BUTTON doesn’t disappear

b) You can click wherever you want to play/pause but my OVERLAY PLAY BUTTON doesn’t disappear

c) You can click on my OVERLAY PLAY BUTTON and it’ll start video and disappears itself but it won’t show up again.

And same thing happens when you go to VIDEO TWO/THREE.
Any advice appreciated!

PS. Unfortunately I couldn’t copy/paste my code here in the Javascript/html/css snippet because it wasn’t showing properly (and I added external libraries but still didn’t work).

const player = document.getElementById("myFrame");
const vimeoPlayer = new Vimeo.Player(player);
const videoPlayer = document.querySelector("#videoPlayer");
const playButton = document.getElementById("playButton");


playButton.onclick = function () {
    playButton.style.visibility = "hidden";
    vimeoPlayer.play();
}

vimeoPlayer.on("pause", function () {
    playButton.style.visibility = "visible";
});
vimeoPlayer.on("play", function () {
    playButton.style.visibility = "hidden";
});


function video1() {
  playButton.style.visibility = "visible";
    player.src = "https://player.vimeo.com/video/103825397?h=96ccc46aec";
}

function video2() {
  playButton.style.visibility = "visible";
    player.src = "https://player.vimeo.com/video/120445953?h=60ce266812";
}

function video3() {
  playButton.style.visibility = "visible";
    player.src = "https://player.vimeo.com/video/19095427?h=e953238ac5";
}

#videoContainer {
  background-color: black;
  border: none !important;
  display: flex;
  flex-flow: row wrap;
  justify-items: center;
  align-items: center;
}

#playButtonContainer {
  border: none !important;
  width: 100vw;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  background-color: transparent !important;
}

#playButton {
  max-width: 150px;
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -100%);
}

.containerItems {
  overflow: hidden;
}

.video_thumbnails {
  width: 100%;
  transition: 0.5s ease all;
  display: block;
  width: 100%;
  height: auto;
}

#videoPlayer {
  margin: 0 auto;
  width: 50%;
  background-color: black;
}

.containerOverlay {
  position: relative;
  width: 33.333%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: black;
  cursor: pointer;
}

.containerOverlay:hover .overlay {
  opacity: 0.8;
}

.text {
  font-size: 1.5rem;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://player.vimeo.com/api/player.js"></script>

<div id="videoContainer">
        <button id="playButtonContainer">
            <img src="https://i.etsystatic.com/10919371/r/il/155a7d/1563938723/il_fullxfull.1563938723_1rmr.jpg" id="playButton">
        </button>
        <div id="videoPlayer" class="ratio ratio-16x9">
            <iframe id="myFrame" src="https://player.vimeo.com/video/187793661?h=583b79a3b7"
                title="Vimeo video player" frameborder="0" autoplay=1
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>

<div class="containerItems text-center">
    <div class="row g-0">
        <figure class="containerOverlay">
            <img src="https://wallpapers.com/images/high/720p-9wear5v9icennc9q.webp" class="video_thumbnails">
            <button class="overlay" onclick="video1()">
                <div class="text">Video One</div>
            </button>
        </figure>
        <figure class="containerOverlay">
            <img src="https://wallpapers.com/images/high/720p-xdq1aa1akvqrswa4.webp" class="video_thumbnails fade-in">
            <button class="overlay" onclick="video2()">
                <div class="text">Video Two</div>
            </button>
        </figure>
        <figure class="containerOverlay">
            <img src="https://wallpapers.com/images/high/720p-n2mogpb8nf78saq2.webp" class="video_thumbnails">
            <button class="overlay" onclick="video3()">
                <div class="text">Video Three</div>
            </button>
        </figure>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
        </script>