angular 2 - how embed youtube video

Question

I got this code

 <div *ngIf="topic.video">
        <div class="video-container">
            <iframe width="300" height="169" src="topic.video.url" style="border:0"></iframe>
        </div>
    </div>

problem: angular will output src="localhost://8001" instead of src="https://www.youtube.com/embed/hr4BbdUiTUM"

What could be wrong here?

UPDATE 2

This is what got after Gunter's answer.

import { Component, OnInit, Pipe, Sanitizer } from '@angular/core';
import { DataService } from '../../shared/data';

    @Component({
        template: `
            <div class="subheader">Feed</div>
                <div *ngFor="let topic of topics; let index = index; trackBy: trackByFn">
                    <div *ngIf="topic.type == 'discussion'">
                        <div *ngIf="topic.video">
                            <div class="video-container">
                                <iframe src="{{sanitizer.bypassSecurityTrustResourceUrl(topic.video.url)}}" ></iframe>
                            </div>
                        </div>
                </div>
            </div>
        `
    })
    export class CompanyComponent implements OnInit {
        constructor(
            private sanitizer:Sanitizer,
            private dataService: DataService
        ) {}

        ngOnInit() {
            this.topics = this.dataService.topics;
        }
    }

I still got this error

company.ts?ac6a:121 Error: Uncaught (in promise): Error: Error in ./CompanyComponent class CompanyComponent - inline template:29:41 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)
Error: unsafe value used in a resource URL context (see

Use the pipe like shown in the answer I linked to in my answer below to tell the Angular sanitizer that it should treat the URL as safe. — Günter Zöchbauer, Feb 13 '17 at 09:19

score 5 · Answer 1 · edited May 23 '17 at 12:25

5

If you want to get the URL from a variable you need to enable binding by using [] or {{}} (never both at the same time, {{}} only works for strings, not for objects or arrays):

[src]="topic.video.url"

or

src="{{topic.video.url}}"

If the URL gets removed by the DOM sanitizer, you can use a pipe like shown in In RC.1 some styles can't be added using binding syntax

import { Pipe, DomSanitizer } from '@angular/core';

@Pipe({name: 'safeResourceUrl'})
export class SafeResourceUrl {
  constructor(private sanitizer:DomSanitizer){}

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

[src]="topic.video.url | safeResourceUrl"

You can also just apply

this.myUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.topic.video.url);

and bind to this instead

[src]="myUrl"

but the pipe is more reusable.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 13 '17 at 09:09

Günter Zöchbauer

623,577
216
2,003
1,567

src="{{sanitizer.bypassSecurityTrustResourceUrl(topic.video.url)}}" will give error, am I using it right? – angry kiwi Feb 13 '17 at 09:41
@angrykiwi using property binding instead – Tiep Phan Feb 13 '17 at 09:45
Not necessarily, but it's usually not a good idea to bind a function in the view because it gets called every time change detection is run. This can also lead your video to be reloaded continually if the ` – Günter Zöchbauer Feb 13 '17 at 09:45
Why do you insist on this bad style instead of for example using the pipe? – Günter Zöchbauer Feb 13 '17 at 10:04
I don't, just not sure how to do it. – angry kiwi Feb 13 '17 at 10:08
I should put the iframe into a component of itself? – angry kiwi Feb 13 '17 at 10:09
possible to show full example base on what I want to do? – angry kiwi Feb 13 '17 at 10:11
Hi! I'm having this same problem now. However your fix doesn't work now because `bypassSecurityTrustResourceUrl` is missing from `Sanitizer` now. Mind a look? http://stackoverflow.com/questions/42677276/how-to-correctly-embed-youtube-iframes-into-angular2-view-getting-unsafe-value – Leon Gaban Mar 08 '17 at 16:56
Change `Sanitizer` to `DomSanitizer` – Günter Zöchbauer Mar 08 '17 at 16:57

angular 2 - how embed youtube video

1 Answers1

Linked