How to Add YouTube Video Player in Ionic 5 Angular

In this Ionic 5 YouTube video implementation tutorial, we will share how to play YouTube videos in the Native Ionic Angular application using Cordova and Ionic Native YouTube video player plugin.

Nowadays, you can not live without YouTube, and Its is a popular video streaming site where you can enjoy any type of video content. But do you know you can also play YouTube videos in the Ionic app using YouTube video id.

Well, you heard it right; this quick tutorial, step by step, describe how to play YouTube videos in an Ionic native app. Without further ado, let us start implementing YouTube player in the Ionic application.

Getting Started

Please ensure you have properly installed the latest version of Ionic CLI on your development machine before we begin.

npm install -g @ionic/cli

Now you are ready to create the fresh Ionic Angular project:

ionic start ionic-youtube-player blank --type=angular

After installing the app, enter into the project folder:

cd ionic-youtube-player

Add YouTube Video Player Plugin

Open terminal type given below commands on the command prompt and begin installing Cordova and Ionic native YouTube video player package. This allows you to integrate YouTube Video Player in the Ionic application effortlessly simply.

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

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

Thereafter, open the config.xml file and add the preference property into the file. Make sure to pass the YouTube API into the value property.

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

Import YoutubeVideoPlayer in App Module

Open app.module.ts file, at the top section import YoutubeVideoPlayer from ‘@ionic-native/youtube-video-player/ngx’ plus add YoutubeVideoPlayer into the providers’ array.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    YoutubeVideoPlayer,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Add YouTube Video Player in Ionic

In the Ionic HTML page, create a button using the ion-button attribute, define click event and bind the custom function, which opens the YouTube video player and invoke the video in application view.

Update home.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic YouTube Video Player
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <ion-button (click)="openYouTubeVedio()">Start Video</ion-button>

</ion-content>

The YoutubeVideoPlayer API provides the handy methods that you need to register into the constructor method, and it will allow you to play the videos using a custom function.

Update home.page.ts file:

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 youTube: YoutubeVideoPlayer
    ) {}

  openYouTubeVedio(){
    this.youTube.openVideo('youtube-video-id');
  }  

}

Start Ionic Project

We can eventually play the YouTube video in the ionic app, but you have to add the platform before that.

ionic cordova platform add ios

ionic cordova platform add android

Next, generate the runnable build:

ionic cordova build ios

ionic cordova build android

Lastly, run the app on the device or emulator:

ionic cordova run ios -l

ionic cordova run android -l

Conclusion

We created a fundamental video player that plays YouTube video with the help of YouTube video id in conjunction with the Ionic Native and Cordova video player plugin. It will give you a great idea about the advanced video player’s nitty-gritty in a real-world app. So this was it, Ultimately the Ionic 5 YouTube player example is completed; make sure to share it with others.