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>

Thanks for the code, It works in desktop but not working in mobile view. Video will not autoplay in mobile

Hey Jefrey! First, thanks for sharing this!
Do you know how to get the click on the default mute/unmute button?
I mean, in my case, I don't need an external mute/unmute button, but I need to know when the user clicks on the default mute/unmute, to trigger another action. (In this case, I need to mute a HTML5 audio that plays automatically on my website.)

I'll be so glad if can give me any pointer.

Thanks again!
Matt.

Hi bro
i also need the same behaviour. did u find any solution for this ?