Add YouTube Video In Your Angular Application

Here is some simple steps to embed your YouTube Video in angular application

• Install the YouTube package
• Import YouTube Player modules
• Add YouTube Player component in HTML
• Import Youtube API script in index.html
• Run the code and see the magic

1 ] Install the YouTube package :

We have following command to install the YouTube Player npm package,

npm install @angular/youtube-player

2 ] Import YouTube Player modules :

You have to import YouTube Player Module into your app.module.ts file (or you can import in your targeted module)

import { YouTubePlayerModule } from "@angular/youtube-player";

...

 imports: [
    ....,
    YouTubePlayerModule,
    ...
  ],

3 ] Add YouTube Player component in HTML :

Add the YouTube player component where you want to use.

It required the Id of YouTube Video.

You can easily find the video id from URL link.

For Example :

https://www.youtube.com/watch?v=YYAB4Td62zG

In this URL the video Id is YYAB4Td62zG , so you have to add this in video player.

<youtube-player 
  videoId="YYAB4Td62zG " 
  suggestedQuality="highres" 
  [height]="250" 
  [width]="500" 
  [startSeconds]="4"
  [endSeconds]="8">
</youtube-player>

Parameters details :

• [videoId]: string — YouTube Video ID to render. It’s the little hash at the end of the YouTube URL. For example, if your video is found at https://www.youtube.com/watch?v=YYAB4Td62zG , then your videoId is YYAB4Td62zG .
• [height]: number — height of video player
• [width]: number — width of video player
• [startSeconds]: number — the moment when the player is supposed to start playing
• [endSeconds]: number— the moment when the player is supposed to stop playing
• [suggestedQuality]:— the suggested quality of the player. This can take the values 'default' , 'small', 'medium', 'large', 'hd720', 'hd1080', and'highres'
• [showBeforeIframeApiLoads]: boolean— whether the iframe will attempt to load regardless of the status of the API on the page. Set this to true if you don’t want the onYouTubeIframeAPIReady field to be set on the global window

4 ] Import Youtube API script in index.html :

You have to import API in index.html file

<script src="https://www.youtube.com/iframe_api"></script>

5 ] Run the code and see the magic :