Youtube API, Muting Video (Iframe)

Question

Project -> http://codepen.io/urketadic/full/YpLgBX/
Problem -> Options -> Matrix Mode (mute button appears, but doesn't work when pressed).
Description -> I have iframe in the HTML with no src, its hidden (width,height=0).
If Matrix Mode gets enabled however, this iframe gets attributed with URL:

$('#iframe').attr("src","https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv&autoplay=1&loop=1");

I have also added mute button that when pressed is suppose to change to unmute button and also silence video playing in the above playlist:

var player;

function onYouTubeIframeAPIReady() {
   player = new YT.Player('ytplayer', { 
     height: '0', 
     width: '0', 
     playerVars: { 
       listType:'playlist', 
       list: 'https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' } } 
                          )};

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

Mute button does change to unmute button, but the video in the playlist does not change.
Does anyone know what im doing wrong here?

Edit: What i currently have, is, i just disable the src attr when its clicked and give it back again. This is not exactly mute, as it resets the song, but if i can't find anything better il just go with this.

Answer 1

Please take a look http://codepen.io/anon/pen/oBgweY

Please note this code in HTML section:

<div id="player"></div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '0',
      width: '0',
      playerVars: { 
   listType:'playlist', 
   list: 'PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' }

    });
  }
</script>

It should be it.

Answer 2

Based from the documentation - Changing the player volume:

• player.mute():Void

• Mutes the player.

• player.unMute():Void

• Unmutes the player.

These are the functions that you have used in your code. You might want to double check your implementation to pinpoint the error your are encountering.

There are many tutorials that you can read like - How to Control YouTube's Video Player with JavaScript and youtube iframe api - easily create and interact with embedded youtube videos for code implementations:

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

This implementation might help you control, just by setting the text for mute and unmute.

Hope this helps.