CODEWITHSUNDEEP
javascriptangular
Aitor Bernal
Aitor Bernal

Reputation: 23

Youtube video in Angular 4

I want to insert a YouTube video in my application in angular 4

here the html:

    <div fxFlex id="visor-video">
        <iframe width="300" height="200"
          [src]="displayURL">
        </iframe>        
      </div>

Here the component:

@Component({
  selector: 'app-video-unit',
  templateUrl: 'video-unit.component.html',
  styleUrls: ['video-unit.component.css']
})

export class VideoUnitComponent implements OnChanges {


  displayURL;
  @Input() video: Video;


  constructor(public videoService: VideoService, private sanitizer: DomSanitizer) {
    this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

  }

  ngOnChanges() {
    this.displayURL = this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

  }
  sanitizedDisplayUrl() {
    return this.getSantizeUrl('https://www.youtube.com/embed/tgbNymZ7vqY');
  }

  public getSantizeUrl(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }

}

But the sistem say that "SafeValue must use [property]=binding: https://www.youtube.com/embed/tgbNymZ7vqY (see http://g.co/ng/security#xss)"

Upvotes: 1

Views: 3075

Answers (2)

Becario Senior
Becario Senior

Reputation: 714

Several things related to general Angular use: - Providers loaded in constructor won't execute until ngOnInit() hook. Don't try to use them in the constructor. - The use of ngOnChanges() and sanitizedDisplayUrl() is redundant and useless here.

Regarding to your question, I would make a check in the template such as:

<div
    fxFlex
    id="visor-video"
    *ngIf=displayURL"
>
    <iframe
        width="300"
        height="200"
        [src]="displayURL"
    ></iframe>        
</div>

This way you prevent the program go into the iframe with displayURL = null. This might be the cause of your problem.

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86790

You need to use bypassSecurityTrustResourceUrl instead of bypassSecurityTrustUrl

Use this code -

this.displayURL = sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/tgbNymZ7vqY');

Working example

Upvotes: 6

Related Questions