onYouTubeIframeAPIReady no se dispara en la aplicación web angular2
Estoy creando una aplicación web usando angular 2, mecanografiado y API de YouTube para agregar un reproductor a la página después del inicio de sesión del usuario.
Entonces, una vez iniciada sesión, la aplicación carga el siguiente componente:
export class MyComponent implements OnInit {
myService: MyService;
constructor( private _myService: MyService ) {
this.myService = _myService;
}
ngOnInit() {
this._myService.loadAPI();
}
}
El componente html contiene la siguiente etiqueta:
<iframe id="player" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
Y finalmente, el servicio tiene lo siguiente:
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);
}
He leído que la API llama automáticamente a la función "onYouTubeIframeAPIReady", por lo que me pregunto qué debería hacer de manera diferente para que funcione correctamente.