Integrate YouTube videos in our angular application

Now we can integrate YouTube videos in our angular application very easily using the Angular YouTube Player component.

So Angular YouTube player component provides the Angular wrapper around the YouTube Player API.

Create the angular application and then implement such functionality 1st.

Install a package

The command is below for the install package.

run ng add @angular/youtube-player

Bash

Once the package is installed in the angular application, then go to the app.module.ts file and import the YouTube Player Module which is available in the '@angular/youtube-player' library, or we can import YouTube Player into the stand-alone component as well.

Then add the <youtube-player videoId="<youtube ID>" to our HTML template.

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

TypeScript

Now in the app.component.html file put the below code.

<h4>Youtube player</h4>
<youtube-player videoId="IzStv5FaJWA"></youtube-player>

Markup

In the above, you will see the YouTube tag, which is the helper to show the videos, and then we have to give the videoId="IzStv5FaJWA".

If the video URL is https://www.youtube.com/watch?v=IzStv5FaJWA, then the video id is IzStv5FaJWA.

 Once we set up the HTML template now we need to configure the youtube iframe to work this “youtube-player” component in our angular application. So to configure it write the below code in the app.component.ts file.

ngOnInit() {
  const scriptTag = document.createElement('script');
  scriptTag.src = "https://www.youtube.com/iframe_api";
  document.body.appendChild(scriptTag);
}

TypeScript

Set the image quality

If we want to set the image quality then we can set the placeholder Image Quality in the template like below.

<h4>Youtube player</h4>
<youtube-player videoId="IzStv5FaJWA" placeholderImageQuality="standard"></youtube-player>
<youtube-player videoId="IzStv5FaJWA" placeholderImageQuality="high"/>
<!-- Default value, it should exist for videos. -->
<youtube-player videoId="IzStv5FaJWA" placeholderImageQuality="standard"/>
<youtube-player videoId="IzStv5FaJWA" placeholderImageQuality="low"/>

Markup

So after doing all these setups when you run this application then in the output, we can see a YouTube player, and we can run that video.

----------------------------

Author : Dotnet Office | https://www.youtube.com/TheDotNetOffice

Share this

Related Posts