iFrame with ng-src says can't interpolate

[Alexander Kohout]

Until Angular 1.1.5 I used the following code to display a Youtube video via an iFrame:

<iframe style="width:100%" ng-src="{{movie.trailer}}" frameborder=0 allowfullscreen>

Since 1.2.0 this breaks with the following error message:

Error: [$interpolate:interr] Can't interpolate: {{ movie.trailer }}

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: ...

It seems to have something to do with $sce, but I can't really understand what's going on there. Can anybody help me out? Thanks in advance!

[Chris Huston]

How about this:

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

Chris

[Alexander Kohout]

Works great, thank you!

[Michael Calkins]

This also works well for mediaelement video directivces.

<video
src='{{ trustSrc(main.videoUrl + upload.filename) }}'
height='400'
width='100%'
preload='auto'
poster='/image/resize/{{ upload.image }}/400/400'
mediaelement>
</video>

[Anthony ESTEBE]

Another solution is to authorise the URL in your trusted resources

App.config(function($sceDelegateProvider, apiUrl) {

  $sceDelegateProvider.resourceUrlWhitelist([

   'self',

   "http://www.youtube.com/embed/**"

  ];

});

http://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

[Aaron Freeland]

Thanks, saved me lots of time =)

[Santhosh Gopalakrishnan]

doesnt work for https links

[Chris Huston]

https links do work. See Plunker below with working https links:

http://plnkr.co/edit/1uTF5GPAwtTmvUawA2og?p=preview

You just need to have a link to a video source that does not require same_origin.