onYouTubeIframeAPIReady não dispara no aplicativo da web angular2
Estou criando um aplicativo da Web usando angular 2, texto datilografado e API do YouTube para adicionar um player à página após o login do usuário.
Portanto, uma vez logado, o aplicativo carrega o seguinte componente:
export class MyComponent implements OnInit {
myService: MyService;
constructor( private _myService: MyService ) {
this.myService = _myService;
}
ngOnInit() {
this._myService.loadAPI();
}
}
O componente html contém a seguinte tag:
<iframe id="player" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
E, finalmente, o serviço tem o seguinte:
player: YT.Player;
loadAPI(){
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('API loaded'); // this is shown on the console.
}
onYouTubeIframeAPIReady(){
this.player = new YT.Player('player', {
events: {
'onReady': this.onPlayerReady,
'onStateChange': this.onPlayerStateChange
}
});
console.log('youtube iframe api ready!'); // this is never triggered.
}
onPlayerReady(event){
event.target.playVideo();
}
onPlayerStateChange(status){
console.log(status.data);
}
Eu li que a função "onYouTubeIframeAPIReady" é chamada automaticamente pela API, então eu me pergunto o que devo fazer de diferente para que ela funcione corretamente.