There are 2 problems in your code:
First you’re adding the <iframe>
manually and who has to add this is the API
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.
Must be in iframe?
– user60252
Do you have to respect the URL parameters? width="100%" height="100%" rel=0 etc...?
– user60252