How to toggle mute/unmute on load or on custom button click a youtube video added via iframe ?

I need to autoplay a youtube video with sound on page load.

Here is the iframe :

<div class="video-container">
<iframe id="player" class="video" src="https://www.youtube.com/embed/'.$vid_id.'?autoplay=1&controls=0&loop=1&mute=1&playlist='.$vid_id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
</div>

Found the snippet bellow on this link https://yootheme.com/support/question/113708

I added the iframe_api to the page <script src="https://www.youtube.com/iframe_api"></script>

Then i used the function bellow for player settings :

  jQuery(function(){jQuery('.video-container iframe').attr('id', 'player');});
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerStateChange() {
      player.unMute();
      player.setVolume(80);
  }

<div class="video-play-btn"></div>

Play button script

$('.video-play-btn').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

And no console errors are displayed. Maybe i should also remove the mute=1 ?