Table of Contents

URL: https://www.progressiverobot.com/ionic-youtube-video-player-ionic/

<^>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:

				
					
&lt;input placeholder="Enter a video id" #videoId&gt;

&lt;button ion-button (click)="openVideo(videoId.value)"&gt;

  &lt;ion-icon name="play"&gt;&lt;/ion-icon&gt;

&lt;/button&gt;