Double click required at first load

Hello everyone
I made a custom button to mute audio on an embedded vimeo video in webflow, all through a embed code component.

the embedded code is this

<div style="padding:56.25% 0 0 0;position:relative;">
    <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" id="embeddedVideo" src="" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<button id="mute" class="mute-on" onclick="myScript()"></button>

<script src=""></script>

document.addEventListener('DOMContentLoaded', function () {
    var iframe = document.getElementById('embeddedVideo');
    var player = new Vimeo.Player(iframe);
    var mute = document.getElementById('mute');

    // Wait for the player to be ready before setting up the click handler
    player.ready().then(function() {
        mute.addEventListener('click', function() {
            player.getVolume().then(function(volume) {
                if (volume === 0) {
                    player.setVolume(1); // Unmute
                } else {
                    player.setVolume(0); // Mute
            }).catch(function(error) {
                console.error("Error:", error);

All is working fine except at the first load of the page, to interact with the button I have to click twice! anyone knows how to handle that issue?

Here is the link to the website:
Here is the read only link:

Thanks in advance