Youtube: How to Present Embed Video with Sound Muted

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('wp-custom-header-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();
}

function onPlayerStateChange() {
  console.log("my state changed");
}

document.getElementById("mute").addEventListener('click', function(event) {
  console.log(player);

  if (player.isMuted()) {
    player.unMute();
  } else {
    player.mute();
  }
});

#mute {
  cursor:pointer;
  padding: 10px 20px;
  background:#000;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
}

<p>
  <button id="mute">Mute/UnMute</button>
</p>
<iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="600" height="400" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&loop=1&modestbranding=1&playsinline=1&rel=0&showinfo=0&enablejsapi=1&widgetid=1;origin=https%3A%2F%2Fepistolariodelamemoria.cl&" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>

Related Topics