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.