javascript - Angular 2+ Youtube Iframe API med befintlig iframe [src]-bindning som misslyckas med att köra händelser

Jag har ett problem med YouTube iframe-API:et som inte kör händelseåteruppringningar på en befintlig iframe.

Om jag använder:

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

Det fungerar

Men om jag använder:

 <iframe id="player" [src]="mainVideo | sanitize"
 width="560" height="315" frameborder="0" allowfullscreen></iframe>

Det laddar inte någon av händelseåterkopplingarna som autoplay eller avisering när personen har sett klart videon.

HTML

 <iframe id="player" [src]="mainVideo | sanitize"
 width="560" height="315" frameborder="0" allowfullscreen></iframe>

Typescript

 ngAfterViewInit() {
    const doc = (<any>window).document;
    let script = doc.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.youtube.com/iframe_api';
    doc.body.appendChild(script);
    console.log(script);
}

ngOnInit() {
    (<any>window).onYouTubeIframeAPIReady = () => {
        console.log((<any>window).YT);
        this.player = new (<any>window).YT.Player('player',
            {
                events: {
                    'onReady': (e) => {
                        e.target.playVideo();
                    },
                    'onStateChange': (e) => {
                        if (e.data === 0) {
                            alert('done');
                        }
                    }
                }
            });
    }
}

MainVideo

this.mainVideo = "http://www.youtube.com/embed/" 
+ this.sect[0].mainVideoUrl + "?origin=http://localhost:56194&enablejsapi=1";

Kan någon hjälpa mig att förstå varför det händer? Själva videon spelas upp när du klickar på play, men den startar inte automatiskt och den meddelar inte användaren när videon är slut.

Tack!