How to mute embeded youtube video? Volume = 0 doesn't work

Question

volume=0 doesn't seem to be supported anymore.
Does anyone know how i can mute my iframe now in year of 2017?

When i click unmute icon, mute icon should appear and video should be muted. (and the other way around)

This is what iv tried thus far:

//Mute-Unmute Music
 $('#unmute').on('click', function() {
    $("#unmute").hide();
    $("#mute").show();
    $("#iframe").attr("volume", "0");
 });
 $('#mute').on('click', function() {
    $("#mute").hide();
    $("#unmute").show();
    $("#iframe").attr("volume", "1");
  });

Answer 1

Any web page that uses the IFrame API must also implement the following JavaScript function:

onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.

So your code should look like this:

var player;

function onYouTubeIframeAPIReady() {
   player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
     }
  });
}

$('#unmute').on('click', function() {
    $("#unmute").hide();
    $("#mute").show();
    player.mute();
});
$('#mute').on('click', function() {
    $("#mute").hide();
    $("#unmute").show();
    player.unMute()
});