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: './docsponent.html',
  styleUrls: ['./docsponent.scss']
})
export class DocsComponent implements OnInit {

  videos = [
    {type:'installation', val:''},
    {type:'usage', val: ''},
    {type:'keyboard shortcuts',val:''}
    ];

  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?

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.ponent.html',
  styleUrls: ['./docs.ponent.scss']
})
export class DocsComponent implements OnInit {

  videos = [
    {type:'installation', val:'https://www.youtube./embed/tgbNymZ7vqY'},
    {type:'usage', val: 'https://www.youtube./watch?v=ahla7JgpDEE'},
    {type:'keyboard shortcuts',val:'https://www.youtube./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?

• javascript
• angular
• iframe
• angular5

1 Answer 1

Here's the answer:

use this:

 return this.sanitizer.bypassSecurityTrustResourceUrl(url);

instead of:

 return this.sanitizer.bypassSecurityTrustUrl(url);