Iframe with youtube video refreshes unexpectly

[kolkov]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
When I click to a link, youtube video refreshes unexpectly.

Expected behavior
AngularJS has no this problem.

Reproduction of the problem
with bootstrap
without bootstrap

What is the motivation / use case for changing the behavior?
Very uncomfortable.

• Angular version: 2.0.0-rc.6

The original issue:
ng-bootstrap/ng-bootstrap#720

[alexzuza]

Use pure pipe instead

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

https://plnkr.co/edit/9JPA5r0gjTwfVckohihp?p=preview

[kolkov]

@alexzuza Thank you very much! That's worked!

[wgbn]

In fact, looking good at your sample code, the problem is with the ChangeDetection strategy chosen, in this case the default strategy.

Is that you expect the component to be mounted and then sanitize the url of the YouTube video. In this case, the [SRC] attribute calls the method that returns the secure URL.

However with ChangeDetectionStrategy.Default enabled (the Angular pattern) your component tree is being reassembled with every change made anywhere in your application (not only within your component) and this causes calling the method to sanitize the URL of the video every reassembly of the DOM. Did you understand the problem there?

There are two ways to solve this:

One is to change the ChangeDetection strategy to the component that displays the video, leaving this ChangeDetectionStrategy.OnPush component. And in this case, if this component requires state changes, you would have to trigger the DOM change check manually through the ChangeDetectionRef.

The other way to do this is to treat the video URL directly in a component attribute instead of calling a function in the iframe's [SRC] attribute.
Let's say you receive the data from this video from an api or database, load it into the component via HTTP and then make it available in the view. The tip is, make this sanitized URL available, I advise doing in the Observable HTTP method that queries the data and assigns it to the attribute in the class.

@Component({
  selector: 'my-app',
  template: `
    <button (click)="doSth()">Do sth</button>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" width="300" height="100" [src]="video.safeUrl" allowfullscreen></iframe>
    </div>
  `
})
export class App implements OnInit {
    video: any;

    constructor(private http: Http) { }

    ngOnInit() {
        this.http.get('someApiUrlVideo').subscribe(
            success => {
                this.video = success.data;
                this.video.safeUrl = this.sn.bypassSecurityTrustResourceUrl(this.video.url);
            }
        );
    }
}

I hope it helped you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}