Ionic 4 | Adding Embedded YouTube Video Player in Ionic 4 Application using Ionic Native Plugin

In our previous post, we have already discussed example application to implement a YouTube video player, but some of the steps are depreciated by the release of stable version 4 of Ionic.

In this article, we will go through the latest steps and methods to implement a YouTube video layer in the Ionic 4 Application.

Also See: Add YouTube Player in Ionic 3 Application

Create a new Ionic Application

Install latest version of Ionic and Cordova CLI.

Also, install the latest version of NPM using this command  $ npm i npm

Now  create a new blank application

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

Install the Cordova and Ionic Native Plugin

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

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

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

Add method in Home Component

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

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

That’s it now you will be able to play YouTube video in a real device following the above tutorial.


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Femi Recent comment authors
newest oldest most voted
Notify of

How about add a live YouTube video to ionic 4