Tutorial
Youtube Video Player in Ionic 2 With Ionic Native
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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>
