title: how to change iframe src attribute in typescript
body: <p>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.</p>
  
  <pre><code>            &lt;ion-item *ngFor="let video of videosListItems"&gt; 
                   &lt;button ion-button (click)="playVideo($event, video)"&gt;{{video.snippet.title}}&lt;/button&gt;
              &lt;/ion-item&gt;
  </code></pre>
  
  <p>above code generates a list of videos. when user tap on any list item then <code>playVideo</code> function called.</p>
  
  <pre><code>playVideo(event, video){
    let playableUrl = 'https://www.youtube.com/watch?v='+video.id.videoId;
    this.videoUrl = playableUrl;
  }
  </code></pre>
  
  <p><code>videoUrl</code> is data member of class in which <code>playVideo</code> function exists. now whenever <code>playVideo</code> function called then it updates the video URL to variable <code>this.videoUrl</code>. everything is good so far. but when i use this variable <code>videoUrl</code> in iframe. it does'nt load that video.</p>
  
  <pre><code>    &lt;ion-card class="youtube"&gt;
          &lt;iframe width="560" height="315" [src]="videoUrl" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/ion-card&gt;
  </code></pre>
  
  <p>how can i do this? Any help would be appreciated.</p>