Ionic/Angular Adding Embedded YouTube Video Player in Application using Ionic Native Plugin

In this tutorial, we'll use the cordova InAppBrowser plugin to add the YoutubeVideoPlayer plugin to an Ionic/Angular Framework app. I hope you already know what Ionic is and how it works. We'll go through the latest steps and methods to add a YouTube video player to the Ionic 4 Application.

Create a new Ionic/Angular Application

Ionic & Cordova cli both should be installed on your local machine. And if it is not, you can install both of them globally by using the command below:

npm install -g ionic@latest cordova

Once you install your Ionic & Cordova globally, next step is to create Ionic/angular application with the brand new application name. So you just have to copy the below command and paste it into your terminal. Make sure to <name> with your real application name.

ionic start <name> blank --type=angular --spec false

Now that you have Ionic/Angular application up and running. next step you have to do is to install youtube embed player plugin in your ionic/angular application.

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

With these two commands,  YoutubeVideoPlayer plugin will be installed in our ionic/angular project. 

Add the YouTube Data V3 API, in the config.xml file.

We need to add the API key to a preference configuration variable in config.xml.

Import Ionic Native Plugin in the Main Module

Now, we'll add the providers array and import the YouTube Video Player native plugin in app.module.ts.

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';


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


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

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

Add Function in Home Component

Import the plugin, then add the list of contractors to use in the home component. Update the code below in home.page.ts

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(
    public youtube: YoutubeVideoPlayer
    ) {}


    openMyVideo(id: any){
      this.youtube.openVideo(id);
    }
}

Add a link to open a video on the home page.

In home.html, we'll add a button that calls the openVideo and method we put in home.page.html above.

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

<ion-content class="ion-padding">


  <p>Below button will open the video given video link <br />
    <ion-button (click)="openMyVideo('rhQmy93LZH8')"> Open Video </ion-button>
    </p>
</ion-content>

That's it! If you followed the steps above, you can now play YouTube videos on a real device.

Deploy Your Ionic/Angular Application:

below commands will help your Ionic/Angular application to build apk and install it directly on connected mobile devices.

ionic cordova platform add android
ionic cordova run android --aot

Below command will build Ionic/Angular application.

$ ionic cordova build android --aot --prod

Conclusion

So that's it for today embed YouTube video. Don't forget to like the post if you enjoy it and Subscribe our YouTube channel. 

Also Check

Ionic 4|5 Cordova InAppBrowser

Ionic 5|4 Cordova Admob Plugin With Example

Ionic 4|5 Cordova GeoLocation Plugin With Example 

Ionic 5|4 Cordova Barcode Scanner Plugin With Example

Ionic 4|5 Cordova Camera Plugin With Example

Ionic 5|4 Http Calls With Demo API

Ionic 4|5 Upload Image and display

Ionic 5|4 Manage Phone Contacts, Call& display