AngularJS - issue when embedding the Youtube video url with directive

Question

I am trying to Embed the url link from a Json to angularJs.

Now i have the {{video.youtubeid}} with the output in Json controller has _kux-YQujjM

But when i use to call this function inside <iframe>, it is not working.

when i use this function inside P tag it show the output as _kux-YQujjM

This is my code used with iframe tag.

<iframe width="100%" height="250" src="//www.youtube.com/embed/{{video.youtubeid}}" frameborder="0" allowfullscreen=""></iframe>

Whether i missed anything in my code or Is there any way to get the url to connect with this link.

Any help will be Appreciated.

maurycy · Accepted Answer · 2014-07-24 09:01:35Z

4

It's beceuse of SCE that don't allow you for constructs like 'something{{myModelValue}}' although you should configure SCE to allow youtube access

.config(function($sceDelegateProvider) {
   $sceDelegateProvider.resourceUrlWhitelist([
     'self',
     '*://www.youtube.com/**'
   ]);
 });

here is a working plunker http://plnkr.co/edit/PZXy6RyiWo60KcIyYh5n?p=preview

answered Jul 24, 2014 at 9:01

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

2 Comments

xsh.7 Over a year ago

You can also use $sce just the current url instead of defining a whitelist: jsbin.com/wevalile/1/edit

maurycy Over a year ago

I just assumed he will change the url, and whitelists are best for it

Michael Kang · Accepted Answer · 2014-07-24 08:36:51Z

0

Use ng-src:

<iframe width="100%" height="250" ng-src="http://www.youtube.com/embed/{{video.youtubeid}}" />

answered Jul 24, 2014 at 8:36

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

4 Comments

KesaVan Over a year ago

I added ng-src , But there is no change in it, when i simply use this {{video.youtubeid}} in <p> it gives the output path correctly as _kux-YQujjM, But in <iframe>, its not working, s there any other way.

herbert Over a year ago

I tried this, but I had no success... I soved my problem with this: stackoverflow.com/questions/21510891/…

Coded Container Over a year ago

This does not solve the interpolation error that Angular returns: $interpolate:interr Interpolation Error

prayagupadhyay Over a year ago

Can't bind to 'ng-src' since it isn't a known property of 'iframe'.

Collectives™ on Stack Overflow

AngularJS - issue when embedding the Youtube video url with directive

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related