How do I include the Youtube Iframe API in Angular2?

user_3683080 0
Viewed 1138

I am using Angular-cli. I'd like to utilize the youtube iframe api within an Angular2 module. I couldn't get the youtube-iframe node package to work. And the more Angular2 specific packages don't seem to support the full api features.

Here's my work so far: I have included the actual api in my assets folder. I have added the location as a script within my .angular-cli.json file.

This is what my AppComponent looks like:

export class AppComponent {
YT;
constructor(){
    this.YT = window["YT"];
}

onYouTubeIframeAPIReady() {
    console.log(this.YT);
    var player;
    player = new this.YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}

ngAfterViewInit(){
    this.onYouTubeIframeAPIReady();
}

It works when I have the devTools open in Chrome. But not when I have them closed. This is the error I get:

this.YT.Player is not a constructor
at AppComponent.webpackJsonp.328.AppComponent.onYouTubeIframeAPIReady

I guess the problem is using window["YT"]. Can anyone provide me with a step by step guide of doing this properly?

angular typescript youtube iframe javascript
1 Answers

This should be a timing issue. For the onYouTubeIframeAPIReady, It is a youtube provided callback. So inside ngOninit() or ngAfterViewInit(), I would recommend you register it at the window level to let youtube API call it when everything is ready.

something like: 

(<any>window).onYouTubeIframeAPIReady = ()=>{
    console.log((<any>window).YT);
    this.player = new (<any>window).YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'KKYYAbGpw6A', // YouTube Video ID
        width: 560,               // Player width (in px)
        height: 316,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 0,  // Hide the Video Annotations
          autohide: 1         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
    });
}
user_14867420
Related