CODEWITHSUNDEEP
javascriptangulariframeangular5
Alexander Mills
Alexander Mills

Reputation: 100010

Loading dynamic list of iframes - "Error: Required a safe ResourceURL"

I am having trouble loading some iframe videos from YouTube, given a dynamic list of urls.

I have this HTML:

<div fxLayout="column">

  <div *ngFor="let v of videos">
    <div fxLayout="row">
      <div>
        Type: {{v.type}}
      </div>
      <div>
        <iframe width="420" height="315"
                [src]="getVideoURL(v)">
        </iframe>
      </div>
    </div>

  </div>

</div>

here is my Angular code:

import { Component, OnInit } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  templateUrl: './docs.component.html',
  styleUrls: ['./docs.component.scss']
})
export class DocsComponent implements OnInit {

  videos = [
    {type:'installation', val:'https://www.youtube.com/embed/tgbNymZ7vqY'},
    {type:'usage', val: 'https://www.youtube.com/watch?v=ahla7JgpDEE'},
    {type:'keyboard shortcuts',val:'https://www.youtube.com/watch?v=bVYXWVs0Prc'}
    ];

  constructor(private sanitizer: DomSanitizer) {

  }

  ngOnInit() {
  }

  getVideoURL(v: any){
    return this.sanitizer.bypassSecurityTrustUrl(v.val)
  }
}

I am getting this error:

Error: Required a safe ResourceURL, got a URL

Does anyone know how to fix this error?

Upvotes: 1

Views: 2671

Answers (1)

Alexander Mills
Alexander Mills

Reputation: 100010

Here's the answer:

use this:

 return this.sanitizer.bypassSecurityTrustResourceUrl(url);

instead of:

 return this.sanitizer.bypassSecurityTrustUrl(url);

Upvotes: 8

Related Questions