Embed mute youtube video

You have 2 problems with your code:

    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 change the iframe to:

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

And correct the javascript (I've arranged the code indentation for easier reading), since you should add the ID and size in Javascript too:

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

Result:

<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 , follow 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: playVideo(); does not work in all environments, as stated in link :

     

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

I do not know if the author wanted exactly the parameters of the URL of the iframe, that is:

'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

Of course, there's no 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>functiononYouTubeIframeAPIReady(){varplayer;varscreenWidth=screen.width;varscreenheight=screen.height;player=newYT.Player('muteYouTubeVideoPlayer',{videoId:'bD7BZPipQHY',//YouTubeVideoIDwidth:screenWidth,height:screenheight,playerVars:{autoplay:1,//Auto-playthevideoonloadcontrols:0,//Showpause/playbuttonsinplayershowinfo:0,//Hidethevideotitlemodestbranding:0,//HidetheYoutubeLogoloop:1,//Runthevideoinaloopfs:0,//Hidethefullscreenbuttoncc_load_policy:0,//Hideclosedcaptionsiv_load_policy:3,//HidetheVideoAnnotationsrel:0,playlist:'cMekP6Jm_lY',//Outrovideonasequenciaautohide:0//Hidevideocontrolswhenplaying},events:{onReady:function(e){e.target.mute();}}});}</script>

SOURCE

Add to your script: player.mute()