How to render a video in angular page except iframe?

Step 1: Install the YouTube package

You install the YouTube player npm package with following command at the home directory of your application.

npm install @angular/youtube-player

Step 2: Import YouTube Player modules

Import the YouTube Player modules in to your app .module.ts (or you can import in your target module)

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

...

imports: [

....,

YouTubePlayerModule,

...

Step 3: Add YouTube Player component in HTML

We can add YouTube player component in our target component as below with the YouTube video ID.

We can easily get any id of and YouTube video. The ID of YouTube video will present in the URL itself.

Example:

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

In this URL, GYAB4Td62zI is the id of the video.

videoId="GYAB4Td62zI"

suggestedQuality="highres"

[height]="250"

[width]="500"

[startSeconds]="4"

[endSeconds]="8">

Demo : https://stackblitz.com/edit/angular-youtube-video

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Pranam Bhat5y ago
Step 1: Install the YouTube package

You install the YouTube player npm package with following command at the home directory of your application.
npm install @angular/youtube-player

Step 2: Import YouTube Player modules

Import the YouTube Player modules in to your app .module.ts (or you can import in your target module)
import { YouTubePlayerModule } from "@angular/youtube-player";
...
imports: [
....,
YouTubePlayerModule,
...
],

Step 3: Add YouTube Player component in HTML

We can add YouTube player component in our target component as below with the YouTube video ID.
We can easily get any id of and YouTube video. The ID of YouTube video will present in the URL itself.
Example:
https://www.youtube.com/watch?v=GYAB4Td62zI

In this URL, GYAB4Td62zI is the id of the video.
videoId="GYAB4Td62zI"
suggestedQuality="highres"
[height]="250"
[width]="500"
[startSeconds]="4"
[endSeconds]="8">
Demo : https://stackblitz.com/edit/angular-youtube-video
0
Sachin Singh5y ago
embed works fine
"https://www.youtube.com/embed/nfk6sCzRTbM?autoplay=1"
width="560" height="315" title="the title">
+1