Integrate Youtube Video Player in Ionic 7 Angular App

Last Updated on March 4, 2024 by Digamber in Ionic

Throughout this quick tutorial, you will learn how to integrate YouTube video player in the Ionic 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 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:

sudo 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

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

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.

npm i cordova-plugin-youtube-video-player

npm install @ionic-native/youtube-video-player --legacy-peer-deps

npm install @ionic-native/core --legacy-peer-deps

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],
  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

By default, the @ionic-native/core plugin is not available in our app’s package.json file.

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

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

Embedding YouTube videos in an Ionic application is an uncomplicated process that can greatly elevate the user experience. Not just that, but it also offers precious multimedia content.

Ionic, a profound framework for creating intuitive cross-platform mobile applications, provides multi-dimensional wats to embed YouTube videos seamlessly.

To embed a YouTube video in an Ionic app, we can take the help of the iframe HTML element, which allows to embed external content within our app’s web view.

The Ionic YouTube Video Player tutorial is ultimately done; So far, we have seen how to run YouTube videos in ionic app by using the YouTube video player plugin and the YouTube data api key.