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.
Table of Contents
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');
}
}