YouTube video player in Angular
In questo articolo vediamo come visualizzare un video di YouTube nella nostra applicazione Angular.
Specifico che la versione che sto usando è la 16, che è la minima richiesta dalla libreria che useremo: youtube-player!
Per installarla possiamo usare npm:
npm install @angular/youtube-player
Poi aggiungiamo il modulo in app.module.ts:
...........
import {YouTubePlayerModule} from '@angular/youtube-player';
@NgModule({
declarations: [
AppComponent,
...........
],
imports: [
...........
YouTubePlayerModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Questo il nostro componente:
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-film',
templateUrl: './film.component.html',
styleUrls: ['./film.component.scss']
})
export class FilmComponent implements OnInit {
@Input() videoId: string = 'FQZ7B7JTta4';
apiLoaded = false;
constructor() {}
ngOnInit(): void {
if (!this.apiLoaded) {
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(tag);
this.apiLoaded = true;
}
}
}
Come vedete ci serve solo l'ID del video, che corrisponde alla parte finale dell'url:
- url -> https://www.youtube.com/watch?v=FQZ7B7JTta4
- ID -> FQZ7B7JTta4
Infine l'HTML:
<div style="text-align: center">
<youtube-player [videoId]="videoId" [height]="500" [width]="1000"></youtube-player>
</div>
Enjoy!
typescript angular youtube-player youtube
Commentami!