Youtube Video Player in Ionic 2 With Ionic Native

YoutubeVideoPlayer is part of Ionic Native, which is a set of wrappers for a curated list of Cordova plugins. These wrappers make it very easy to implement native functionality in your apps. Here let’s see how to setup a Youtube video player:

First install the YoutubeVideoPlayer Cordova plugin:

$ ionic plugin add https://github.com/Glitchbone/CordovaYoutubeVideoPlayer.git

Then import it in your component:

import { YoutubeVideoPlayer } from 'ionic-native';

You can now use the openVideo() method:

playVideo(videoId) {
  YoutubeVideoPlayer.openVideo(videoId);
}

And now in your template it’s as simple as calling playVideo() with a valid Youtube video id:

<input placeholder="Enter a video id" #videoId>
<button ion-button (click)="openVideo(videoId.value)">
  <ion-icon name="play"></ion-icon>
</button>