Tem 2 problemas no teu código:
Primeiro você esta adicionando o <iframe>
manualmente e quem tem que adicionar isso é a API
Tem um erro de script, esta sobrando um }
no final:
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
Primeiro troque o iframe por:
<div id="player"></div>
E corrija o javascript (eu organizei a identação do código para facilitar a leitura), fora que deve adicionar o ID e o tamanho no Javascript também:
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
Resultado:
<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>
você também pode mudar o código para isto:
<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>
Exemplo básico
Veja o exemplo funcionando no jsfiddle, segue o código:
<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>
Nota: o playVideo();
não funciona em todos ambientes, conforme dito em https://developers.google.com/youtube/iframe_api_reference?hl=pt-br:
Devido a esta restrição, funções e parâmetros, como autoplay, playVideo() e loadVideoById(), não funcionarão em todos os ambientes de dispositivos móveis.