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.

score 4 · Accepted Answer · answered Jul 24 '14 at 09:01

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/**'
   ]);
 });

answered Jul 24 '14 at 09:01

maurycy

You can also use $sce just the current url instead of defining a whitelist: http://jsbin.com/wevalile/1/edit – naeramarth7 Jul 24 '14 at 09:05
I just assumed he will change the url, and whitelists are best for it – maurycy Jul 24 '14 at 09:08

score 0 · Answer 2 · answered Jul 24 '14 at 08:36

0

Use ng-src:

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

answered Jul 24 '14 at 08:36

Michael Kang

I added ng-src , But there is no change in it, when i simply use this {{video.youtubeid}} in
it gives the output path correctly as _kux-YQujjM, But in , its not working, s there any other way.
– KesaVan Jul 24 '14 at 08:41
I tried this, but I had no success... I soved my problem with this: http://stackoverflow.com/questions/21510891/angular-ng-bind-html-doesnt-work-with-youtube-embed – herbert Jul 16 '15 at 20:39
This does not solve the interpolation error that Angular returns: $interpolate:interr Interpolation Error – Coded Container Jul 18 '16 at 17:51
`Can't bind to 'ng-src' since it isn't a known property of 'iframe'.` – prayagupa Jul 10 '17 at 20:27

2 Answers2