How to select and control Embedded Youtube videos


#1

Hello there,

I’m using Ionic 3 and I have a few Youtube embedded videos on my page.

Everything is fine, but I want to stop the video when I leave the page, otherwise it just keeps going. So my problem is, how can I select the video which is in a frame and how to control such object, is there a method stop(), or pause() ?

My code:

page.html

<ion-card *ngFor="let v of videos">
    <ion-card-header>
      {{v.title}}
    </ion-card-header>
    <ion-card-content>
      <iframe width="560" height="315" [src]="v.video | youtube" frameborder="0" frameborder="0"></iframe>
    </ion-card-content>
  </ion-card>

page.ts

private videos: any[] = [
   {
     title: 'Ultimate Dog Tease',
     video: 'https://www.youtube.com/embed/nGeKSiCQkPw?rel=0'
   },
   {
     title: 'Neno Halloween',
     video: 'https://www.youtube.com/embed/93tlXl4qtOY?rel=0'
   }
 ]

What I want to do is to stop all videos when I leave the page, so the code should be inside the ionViewWillLeave()

So, any help on how to select the video, which object it should be and what commands can I use?

Cheers!