Catch youtube embed video events in ionic 3 app

Question

In my ionic app I have listed youtube embed videos as follows :

<iframe allowfullscreen frameborder="0" height="200" width="100%" [src]="video.url">
      </iframe>

the video.url is generated from the below function

generateVideoUrl(videoId) {
    return this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/" + videoId + "?rel=0&showinfo=0");
  }

It works fine, but I also want to capture events like youtube video is paused, or ended, or started playing etc. I tried to import this http://brandly.github.io/angular-youtube-embed/#/ and use it with my ionic3 app, but that gives error 'angular is not defined'. Ionic does use angular but may be it use it differently that angular not defined error is generated.

Thanks for you help.

Answer 1

You don't need to use embedded youtube frames on your ionic app.You can use native Youtube Video Player plugin.

Play Youtube Videos in a native Video Player on Android & iOS

ionic cordova plugin add cordova-plugin-youtube-video-player

npm install --save @ionic-native/youtube-video-player

.ts

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

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

In app.module.ts, also "import" YoutubeVideoPlayer and add it into the "providers" section.

This is the Git repo. Please review this link for more instructions including adding a YouTube API key.