Custom controls/player vimeo video

vimeo-video.html

<style>
.vid-buttons{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:60px;height:60px;}
.play-pause-button{width:100%;height:100%;display:flex;border-radius:100%;background-color:#ffffff;justify-content:center;align-items:center;}
.play-pause-button>span{height:24px;}
</style>

<div class="vimeo-player" data-vimeo_id="<?php // vimeo video id ?>"></div>
<div class="vid-buttons">
    <a href="javascript:;" class="play-pause-button">
        <span class="play-icon"><?php echo icon_play('#000'); ?></span>
        <span class="pause-icon" style="display:none;"><?php echo icon_pause('#000'); ?></span>
    </a>
</div>


<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var vimeoPlayers = document.querySelectorAll('.vimeo-player');
vimeoPlayers.forEach(function(playerElement) {
    var videoId = playerElement.getAttribute('data-vimeo_id');
    var vimeoPlayer = new Vimeo.Player(playerElement, {
        id: videoId,
        controls: false, // Hide controls
        width: '685', // Set width
        height: '500' // Set height
    });

    var parentDiv = playerElement.parentNode;
    var playPauseButton = parentDiv.querySelector('.play-pause-button');
    var playIcon = playPauseButton.querySelector('.play-icon');
    var pauseIcon = playPauseButton.querySelector('.pause-icon');

    function showPlayButton() {
        playIcon.style.display = 'flex';
        pauseIcon.style.display = 'none';
    }

    function showPauseButton() {
        playIcon.style.display = 'none';
        pauseIcon.style.display = 'flex';
    }

    function showPlayPauseButton() {
        playPauseButton.style.display = 'flex';
    }

    function hidePlayPauseButton() {
        // Only hide if video is playing, otherwise keep it visible
        vimeoPlayer.getPaused().then(function(paused) {
            if (!paused) {
                playPauseButton.style.display = 'none';
            }
        });
    }

    playPauseButton.addEventListener('click', function() {
        vimeoPlayer.getPaused().then(function(paused) {
            if (paused) {
                vimeoPlayer.play();
                showPauseButton();
            } else {
                vimeoPlayer.pause();
                showPlayButton();
            }
        });
    });

    parentDiv.addEventListener('mouseenter', function() {
        vimeoPlayer.getPaused().then(function(paused) {
            if (!paused) {
                showPauseButton();
            }
        });
    });

    parentDiv.addEventListener('mouseleave', function() {
        vimeoPlayer.getPaused().then(function(paused) {
            if (paused) {
                showPlayButton();
            }
        });
    });

    // Show play/pause button with play icon initially
    showPlayButton();

    // Show play/pause button on video load
    vimeoPlayer.on('loaded', showPlayPauseButton);

    // Hide play/pause button while the video is playing
    vimeoPlayer.on('play', hidePlayPauseButton);

    // Show play/pause button on hover
    parentDiv.addEventListener('mouseenter', showPlayPauseButton);
    parentDiv.addEventListener('mouseleave', hidePlayPauseButton);
});
</script>