Embed Mute Youtube Video

Question

I’m trying to get the video to start mute but it’s not working, is that the code is correct?

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

  function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {

      events: {
        'onReady': onPlayerReady,
        'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
        'onStateChange': onPlayerStateChange,
        'onError': onPlayerError
      }
    });
  }

  function onPlayerReady(event) {
    event.target.mute();

  }
  }

</script>

<iframe id="player" width="100%" height="100%" src="https://www.youtube.com/embed/bD7BZPipQHY?loop=1&rel=0&amp;autoplay=1&controls=0&amp;enablejsapi=1&showinfo=0?ecver=1&autohide=1&&playlist=bD7BZPipQHY" frameborder="0" allowfullscreen></iframe>

Answer 1

There are 2 problems in your code:

1. First you’re adding the <iframe> manually and who has to add this is the API

2. There’s a script error, there’s one left } in the end:

       var tag = document.createElement('script');
       tag.src = "https://www.youtube.com/iframe_api";
       var firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   
       function onYouTubeIframeAPIReady() {
           var player = new YT.Player('player', {
               events: {
                   'onReady': onPlayerReady,
                   'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
                   'onStateChange': onPlayerStateChange,
                   'onError': onPlayerError
               }
           });
       }
   
       function onPlayerReady(event) {
           event.target.mute();
       }
   } <--- AQUI esta sobrando
   

First exchange the iframe for:

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

And fix the javascript (I organized the code identation to make it easier to read), out that should add the ID and the size in Javascript as well:

height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',

Upshot:

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

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

function onYouTubeIframeAPIReady() {
    var player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}

function onPlayerReady(event) {
    event.target.mute();

    e.target.playVideo(); //Autoplay se necessário, se não remova esta linha
}
</script>

you can also change the code for this:

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

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

function onYouTubeIframeAPIReady() {
    var player = new YT.Player('player', {
        events: {
            'onReady': function (e) {
                e.target.mute();
            },
            'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}
</script>

Basic example

See the example working on jsfiddle, follows the code:

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

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

function onYouTubeIframeAPIReady() {
    var player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': function (e) {
                e.target.mute();
                e.target.playVideo();
            }
        }
    });
}
</script>

Note: the playVideo(); does not work in all environments, as stated in https://developers.google.com/youtube/iframe_api_reference?hl=pt-br:

Due to this restriction, functions and parameters such as autoplay, playVideo() and loadVideoById(), will not work in all mobile environments.

Answer 2

I don’t know if the author wanted exactly with the parameters of the iframe URL, IE:

`width="100%" height="100%"` - toda a area da tela

`rel=0` - remover vídeos relacionados do final dos vídeos incorporados

`controls=0` não exibir os controles do player

`playlist: 'cMekP6Jm_lY'`  Outro vídeo na sequencia

And of course, I’m out of sound!

CSS

 body,
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    * {
        padding: 0;
        margin: 0;
    }

    iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: none;
    }

HTML + SCRIPTS

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

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  var screenWidth = screen.width;
  var screenheight = screen.height;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'bD7BZPipQHY', // YouTube Video ID
    width: screenWidth,
    height: screenheight,
    playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 0,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 0,  // 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
      rel: 0,
      playlist: 'cMekP6Jm_lY',  // Outro video na sequencia
      autohide: 0         // Hide video controls when playing
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }
</script>

SOURCE

Answer 3

Add to your script: player.mute()