Ionic Tutorials

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';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      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 file:

import { Component } from '@angular/core';

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

export class HomePage {

  constructor(private youtubeVideoPlayer: YoutubeVideoPlayer) {}



Place given code into the file:

<ion-header [translucent]="true">
      Implement YouTube Video Player in Ionic

<ion-content [fullscreen]="true">
  <ion-button (click)="invokeVideoPlayer()">Start Video Player</ion-button>


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


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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago