Integrate Youtube Video Player in Ionic 6 Angular App

Throughout this quick tutorial, you will learn how to integrate YouTube video player in the Ionic 6 Angular application using the Ionic native and Cordova plugin.

The YouTube Video player plugin is available through Cordova and Ionic native; It allows playing YouTube videos in native YouTube application. It easily supports iOS and Android platforms.

Not just angular, but you can use it to work on React ecosystem. Let us start creating a simple ionic app and implement a YouTube video player in Ionic.

Ionic 6 Native Youtube Video Player Example

• Step 1: Set Up Ionic App
• Step 2: Install YouTube Video Player Plugin
• Step 3: Update Video Plugin in App Module
• Step 4: Add YouTube Video Player in Ionic
• Step 5: Test Ionic App

Set Up Ionic App

Ionic app development begins by installing Ionic command-line-interface on your system:

npm install -g @ionic/cli

You are ready to install a blank new Ionic Angular app:

ionic start video-streaming-app blank --type=angular

Move to app root:

cd video-streaming-app

Install YouTube Video Player Plugin

Are you ready to retrieve YouTube videos in Ionic, but wait, you need to install the ionic native and Cordova YouTube video player plugin.

ionic cordova plugin add cordova-plugin-youtube-video-player
npm install @ionic-native/youtube-video-player
npm i @ionic-native/core

You require to pass your YouTube api into the value property and then include the following code into the config.xml file.

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

Update Video Plugin in App Module

After adding the plugin into the ionic app, you have to register the YoutubeVideoPlayer module into the main AppModule class.

Head over and include the given code into the app.module.ts file:

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

This step will show you how to run a video in the ionic app through YouTube id to run a video.

We need to define a button, add the click event and pass the custom function that we created using the openVideo() method and trigger the function to play the YouTube video in ionic.

Add following code into the 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 youtubeVideoPlayer: YoutubeVideoPlayer) {}
  invokeVideoPlayer(){
    this.youtubeVideoPlayer.openVideo('pass-video-id');
  }  
}

Place given code into the home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Implement YouTube Video Player in Ionic
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  
  <ion-button (click)="invokeVideoPlayer()">Start Video Player</ion-button>
</ion-content>

Test Ionic App

Lastly, follow the given instructions to add the platform, create a build and start the app on the virtual or real device.

# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android

Use following command to create the build.

# iOS
ionic cordova build ios
# Android
ionic cordova build android

Start the app on the device.

# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l

Conclusion

The Ionic YouTube Video Player tutorial ultimately done; We described how to run YouTube videos in ionic app by using the YouTube video player plugin and the YouTube data api key.