CODEWITHSUNDEEP
javascriptvideoiframeyoutubeionic2
Asad ullah
Asad ullah

Reputation: 716

how to change iframe src attribute in typescript

I am creating an ionic2 app. in this app i'm calling youtube API to fetch videos from my channel. when response came, it contains all video IDs of my channel. i want to make a list of videos, when user taps on any video, it will play on iframe created just above the list. my code so far looks like this.

            <ion-item *ngFor="let video of videosListItems"> 
                 <button ion-button (click)="playVideo($event, video)">{{video.snippet.title}}</button>
            </ion-item>

above code generates a list of videos. when user tap on any list item then playVideo function called.

playVideo(event, video){
  let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
  this.videoUrl = playableUrl;
}

videoUrl is data member of class in which playVideo function exists. now whenever playVideo function called then it updates the video URL to variable this.videoUrl. everything is good so far. but when i use this variable videoUrl in iframe. it does'nt load that video.

    <ion-card class="youtube">
        <iframe width="560" height="315" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>

how can i do this? Any help would be appreciated.

Upvotes: 4

Views: 4571

Answers (1)

Ruben Marcus
Ruben Marcus

Reputation: 338

try this:

playVideo(event, video){
      let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
      this.videoUrl = playableUrl;
     (<HTMLIFrameElement>document.getElementById('videoIframe')).src = this.videoUrl;
}

in html:

 <ion-card class="youtube">
        <iframe width="560" height="315" id="videoIframe" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>
    </ion-card>

Upvotes: 1

Related Questions