Ionic 3 YouTube Video Player Embed Example – Using Native Plugin

In this tutorial, we will create an Ionic 3/4 application to demonstrate How to Add YouTube Video Player. We will Install the Cordova plugin and Ionic Native Wrapper to add functionality in Ionic 3/4 Application by using which YouTube’s Player can be opened to Play any YouTube video right from the Ionic application itself. To play a Video we need to provide the ID of video which we want to play.

Let’s start with implementation and create an application to play YouTube Videos from Ionic 3/4 Application.

Before we start with application make sure that your system is having updated version of NodeJS installed.

Create a new Ionic Application

Install latest version of Ionic and Cordova CLI.

$ npm install -g ionic cordova

Select the version of Ionic3 or Ionic 4:

Installation Tutorial for Ionic 3 Version

Now we will create a new blank application

$ ionic start Ionic3YouTubeVideoPlayer blank

After the application is created, go to the root using the CD command

$ cd Ionic3YouTubeVideoPlayer

If your system is having Visual Studio code(VS Code) installed, use $ code .  command to open the project in VS Code

Install the Cordova and Ionic Native plugins

We will install YouTube Video Player Cordova plugin and Ionic Native Wrapper to support plugin in our Angular application.

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

Add preference in config.xml with YouTube Data V3 API

In config.xml we need to add a preference configuration variable with the API key

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

Click here to know more on How to get API key?

Import Ionic Native Plugin in the Main Module

Now we will import YouTube Video Player native plugin in app.module.ts and add in providers array

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    YoutubeVideoPlayer,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Add method in Home Component

Import plugin then add in contractor list to use in the home component. Replace below code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    private youtube: YoutubeVideoPlayer
    ) {

  }

  openMyVideo(){
    this.youtube.openVideo('rhQmy93LZH8');
  }

}

 

Add Button in Home HTML to Open Video

In home.html, we will add a button to call openVideo method which we added above in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 YouTube Player
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Open YouTube Video Player in Ionic 3 Appliccation Demo
  <p>
    <button ion-button round icon-start color="danger" (click)="openMyVideo()">
      <ion-icon name="logo-youtube"></ion-icon>
      Open YouTube Video
    </button>
  </p>
</ion-content>

Installation Tutorial for Ionic 4 Version

UPDATE: Please check this link for Ionic 4 tutorial

 

Create New Ionic 4 Application

$ ionic start Ionic4YouTubePlayer blank --type=angular

 

Install the Cordova and Ionic Native plugins

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

 

Add preference for YouTube API KEY in config.xml file. See How to Get API Key?

<preference name="YouTubeDataApiKey" value="AIzaSyA2thzZ2XXXXXXXXXXXXXXXXXXX50Ras_A" />

 

Import plugin in 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 { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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: [
    StatusBar,
    SplashScreen,
    YoutubeVideoPlayer,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add button HTML in home.page.html file

<ion-button size="small" (click)="openVideo()">Open Video Player</ion-button>

Now add this method 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(
    private youtube: YoutubeVideoPlayer
  ) {}

  openVideo(){
    this.youtube.openVideo('myvideoid');
  }
}

 

After adding this HTML app will look like this image