Play YouTube Video In Ionic 5 Angular Application

Hello All, In the last Ionic we had discussed How to create a pdf viewer in the Ionic 5 application. Now, In this Ionic 5 tutorial, You will learn How to play YouTube Video in the Ionic 5 angular application.

We will use the YouTube Video player plugin which is available for Ionic-native. This plugin is supported on both android & ios platforms. So, let’s start building the YouTube Player application in Ionic 5.

Play YouTube Video In Ionic 5 Example

Step1: Create a new Ionic project using the following command

ionic start myApp blank

After that select angular project instead of react.

Move the current directory to the project directory using the following command

cd myApp

Now, Open the newly create the Ionic project in Visual Studio Code using the following command

code .

Step2: Install the YouTube Player Plugin & npm dependency

Ionic 5 YouTube Player app needs to install the YouTube player plugin. So, Let’s install it using the following command.

ionic cordova plugin add cordova-plugin-youtube-video-player

Install npm package using the following command

npm install @ionic-native/youtube-video-player

Step3: Create YouTube API

Now, You need to configure YouTube API Key to play YouTube Video. So, follow the below steps to create a YouTube API.

How to Create YouTube API Key

• Go to Google Developer Console
• Create New Project -> Write Project Name -> Click Create

• Click on Credential (Left Side Menu) -> Create Credential -> API Key -> Generate API Key

• Click on Library (Left Side Menu)-> Search “youtube data api v3” -> Click Enable

Step4: Configure YouTube API Key

Now, You require to configure YouTube API Key in the Ionic application.

Update the config.xml as follows

<preference name="YouTubeDataApiKey" value="[YOUR YOUTUBE API]" />

Step5: Include YoutubeVideoPlayer provider in home.module.ts as follows

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage],
  providers: [YoutubeVideoPlayer]
})
export class HomePageModule { }

Update home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">YouTube Video Player</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-button (click)="playVideo()">Play Video</ion-button>
  </div>
</ion-content>

Update home.page.ts as follows

import { Component } from '@angular/core';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private player: YoutubeVideoPlayer) { }

  playVideo() {
    this.player.openVideo('KK1vUvpi998');
  }
}