Embedded Youtube - but Muted

Get Help
1

Hello all,

I am trying to get YouTube videos embedded and auto playing (working) but to have the sound muted (not working).

I am using the YouTube IFrame API with the following code: -

<div id="muteYouTubeVideoPlayer"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'VIDEO_ID', // YouTube Video ID
    width: 560,               // Player width (in px)
    height: 316,              // Player height (in px)
    playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 1,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 1,  // Hide the Youtube Logo
      loop: 1,            // Run the video in a loop
      fs: 0,              // Hide the full screen button
      cc_load_policy: 0, // Hide closed captions
      iv_load_policy: 3,  // Hide the Video Annotations
      autohide: 0         // Hide video controls when playing
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }

 // Written by @labnol 
</script>

This works in the preview window in the layout designer, the video plays and the speaker control has a line through it as if it has been muted (Same in IE and Chrome)

How ever when it opens on the client, the video plays but the speaker is not crossed out and sound plays.

Any one have any idea of why the preview is working and the client is not.

Server and client version are both 1.7.8

Thanks in advance.