Question 31038 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I toggle video mute in an iframe ( youtube ) with a button? – WordPress

how are u?

I am trying to make a single button for play/mute process for youtube iframe in wordpress header…

<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="2000" height="1200" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&amp;controls=0&amp;disablekb=1&amp;fs=0&amp;iv_load_policy=3&amp;loop=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fepistolariodelamemoria.cl&amp;widgetid=1" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>

<div id="mute">
</div>

JS

$("#mute").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");
  }
});

but it doesn’t work for me, could you help me with this

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    It's work for me, Thanks!

    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&amp;controls=0&amp;disablekb=1&amp;fs=0&amp;iv_load_policy=3&amp;loop=1&amp;modestbranding=1&amp;playsinline=1&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;widgetid=1;origin=https%3A%2F%2Fepistolariodelamemoria.cl&amp" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>


  2. 0

    Maybe this helps?:
    https://stackoverflow.com/a/26478263/17135631

    $("video").prop('muted', true);

$(".mute-video").click(function () {
    if ($("video").prop('muted')) {
        $("video").prop('muted', false);
        $(this).addClass('unmute-video');

    } else {
        $("video").prop('muted', true);
        $(this).removeClass('unmute-video');
    }
    console.log($("video").prop('muted'))
});
    Login or Signup to reply.
  3. 0

    js :

    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('youtube-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();
  }
});

    html :

    <h1>Mute Youtube Video Using a Button</h1>

<p>
  <button id="mute">Mute/UnMute</button>
</p>

<iframe id="youtube-video" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&autoplay=1&rel=0&mute=0" frameborder="0" width="600" height="400"></iframe>

    reference link : https://codepen.io/rno1d/pen/XzLKwj

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search