Responsive Youtube with External Toggle Mute and UnMute Sound

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>

  .videoWrapper {
	  position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  padding-top: 25px;
	  height: 0;
  }
  
.videoWrapper iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
  }
  
  button#mute-video {
    color: #fff;
    background-color: #b6412e;
    font-size: 24px;
    margin: 30px auto -50px auto;
    display: block; 
 }
 
 </style>

    <div class="videoWrapper">
      <div id="player"></div>
   </div> 

<button id="mute-video">TOGGLE SOUND</button>
<script>      
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          playerVars: { 'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' },
          videoId: 'PASTE_YOUR_YOUTUBE_VIDEO_ID_HERE',
           height: '100%',
        width: '100%',
          events: {
            'onReady': onPlayerReady}
        });
        
      }
  
      function onPlayerReady(event) {
        event.target.mute();
      } 
  
      function toggleSound() {
        if (player.isMuted()) {
          player.unMute()
        } else {
          player.mute()
      }
      }
  
    $('#mute-video').on('click', function(){    
              toggleSound();     
        
      }); 
  
</script>