URL sanitization is causing refresh of the embedded YouTube video

Question

I have a problem with my AngularJS 2 app (I am using RC5 version of AngularJS 2). It seems that a sanitized URL is triggering change detection which then updates the div below despite not having any changes in my component state.

From user point of view this manifests itself as reload of the video while it is playing.

So in my component view I have:

<div *ngIf="isVideo(item)">    <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>           </div> 

The implementation of the function above in the component code is:

getTrustedYouTubeUrl(linkedVideo:LinkedVideoModel) {     return this.sanitizer.bypassSecurityTrustResourceUrl(linkedVideo.video.url); }     

In debugger I see that the div gets refreshed quite often, by something triggered in AngularJS 2 framework.

The issue goes away, if I replace the HTML snippet above with a hard-coded URL:

<div *ngIf="isVideo(item)">    <iframe src="<hardcoded youtube url here>" scrolling="no" frameborder="0" allowfullscreen></iframe>           </div>  

So I am suspecting that URL sanitization is causing it.

Can anyone point me in the right direction? A working example of embedded YouTube videos that have their URL bound to a property on the component maybe?

Answer 1

Figured it out.

For anyone interested. The problem was the use of this function in my html

   [src]="getTrustedYouTubeUrl(item)" 

The reload side effect was gone once I changed the code to calculate the safe url when the data is loaded in my service and changed the iframe binding to this

    <iframe [src]="item.video.safeUrl" scrolling="no" frameborder="0" allowfullscreen></iframe>     

Note thatr I am now binding to a property.