iframe not loading src in angular4 application

Question

In my application i'm loading a youtube vedio into a iframe. I have sanitized the url. But the src attribute doesnt load when i run the application.

below is the html:

<a [href]="data.url" target="_blank" *ngIf="data.contentTypeString=='YOUTUBE_VIDEO' && data.url != null">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe *ngIf="data.contentTypeString=='YOUTUBE_VIDEO'" 
                        class="embed-responsive-item" 
                        src="{{data.url}}"></iframe>
            </div>
        </a>

below is the screenshot when i run the same:

The src just wont load i have tried with [src]=data.url.

Below is the method i'm using to sanitize the url:

public manageYoutubeUrl(url: any) {
        console.log("url====" + url);
        var youtubeUrl = this.sanitize.bypassSecurityTrustUrl(url.replace('watch?v=', 'embed/').replace('http://', 'https://')+"?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent");
        console.log("youtubeUrl=====" + youtubeUrl);
        return youtubeUrl;
    }

When i check the log for youtubeURL it's comming like this:

youtubeUrl=====SafeValue must use [property]=binding: https://www.youtube.com/embed/l-103taCWOQ?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent (see http://g.co/ng/security#xss)

ERROR Error: Required a safe ResourceURL, got a URL (see http://g.co/ng/security#xss) at DomSanitizerImpl.checkNotSafeValue (

Please guide. Thanks.

See your console, is there an error? See this answer: stackoverflow.com/a/46303484/1791913 — FAISAL
– FAISAL, Commented Sep 20, 2017 at 11:08

Rahul Singh · Accepted Answer · 2017-09-20 11:16:14Z

6

You need to do some thing like this

TS

 import { DomSanitizer } from '@angular/platform-browser';

 this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url)

Template

<iframe id="frame" frameborder="0" [src]="current_url"></iframe>

Update After comment

Just do some thing like [src]="current_url" or [attr.src] = ""

edited Sep 20, 2017 at 11:16

answered Sep 20, 2017 at 11:09

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

7 Comments

Shruti Nair Over a year ago

i have updated my question with the sanitiz method and error

Rahul Singh Over a year ago

then you just do some thing like [src] = "url". you should update the question with the whole method as this is the first point of failure .

Shruti Nair Over a year ago

:I have done everything that you are telling but its still not working

Rahul Singh Over a year ago

try and use the embed url instead of the regular one https://www.youtube.com/embed/video-ID @ShrutiNair

Kees Briggs Over a year ago

I have the same problem as well.

|

Collectives™ on Stack Overflow

iframe not loading src in angular4 application

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related