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

Question

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?

Alexander Mills · Accepted Answer · 2018-02-06 03:32:39Z

8

Here's the answer:

use this:

 return this.sanitizer.bypassSecurityTrustResourceUrl(url);

instead of:

 return this.sanitizer.bypassSecurityTrustUrl(url);

answered Feb 6, 2018 at 3:32

Alexander Mills

102k167 gold badges549 silver badges936 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related