Using Youtube's Javascript API with Angular

Question

I'm currently using the @angular/youtube-player package for Angular 12. I'm using the <youtube-player> tag the library suggests as follows:

<youtube-player *ngIf="currentMedia === 'youtube'" videoId="{{currentVid}}" suggestedQuality="highres" [height]="250" [width]="500" ></youtube-player>

I have the iframe API in index.html as some tutorial video suggested and it seems to work for making the video initialize.

The question is, how do I call the API? For example, I want to do something like player.getCurrentTime() or change the time around with javascript. Does anyone know? I haven't found any good documentation for it with the angular youtube-player.

Abhinav Kumar · Accepted Answer · 2021-07-05 05:45:53Z

1

All the API method are implemented in the component itself. Check the code here.

github code

You can create a component instance in the constructor, or even using # reference in the HTML to call those methods.

.html

<youtube-player *ngIf="currentMedia === 'youtube'" videoId="{{currentVid}}" suggestedQuality="highres" [height]="250" [width]="500" #player></youtube-player>

.ts

@ViewChild('player') child_component: YouTubePlayer;

someMethod(){
  this.child_component.getCurrentTime(); // Or any public method
}

answered Jul 5, 2021 at 5:45

Abhinav Kumar

3,0741 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taylor Wright Over a year ago

Thanks for the response. Where exactly is YouTubePlayer coming from for the child component? I'm getting an error of Cannot find name 'YouTubePlayer'. 14 @ViewChild('player') player: YouTubePlayer;

Abhinav Kumar Over a year ago

Thats the type of the component, you can import , you might have imported in the module to use that in html ? same way you can import here just to add a type to var.

Collectives™ on Stack Overflow

Using Youtube's Javascript API with Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related