angular interpolate:interr error when adding url from variable [duplicate]

Question

I am trying to add a dynamic id to a youtube url like this:

<iframe width="460px" height="415px" ng-src="{{post.youtube_id}}" frameborder="0" allowfullscreen></iframe>

This is one of the urls I am trying to to put in the src: https://www.youtube.com/embed/C-IiiFvfdVo

When I do this I get the following error:

http://errors.angularjs.org/1.5.8/$interpolate/interr?p0=%7B%7Bpost.youtube_id%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y

angular.min.js:118 Error: [$interpolate:interr] http://errors.angularjs.org/1.5.8/$interpolate/interr?p0=%7B%7Bpost.youtube…ecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y at Error (native) at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:6:412 at Function.Ka.interr (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:210:135) at J (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:104:438) at Array. (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:128:471) at S.exp (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:106:51) at Object.pre (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:79:374) at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:16:71 at la (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:81:90) at p (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:66:149)(anonymous function) @ angular.min.js:118(anonymous function) @ angular.min.js:90J @ angular.min.js:104(anonymous function) @ angular.min.js:128S.exp @ angular.min.js:106pre @ angular.min.js:79(anonymous function) @ angular.min.js:16la @ angular.min.js:81p @ angular.min.js:66g @ angular.min.js:58g @ angular.min.js:58g @ angular.min.js:58g @ angular.min.js:58(anonymous function) @ angular.min.js:58(anonymous function) @ angular.min.js:63d @ angular.min.js:59m @ angular.min.js:64(anonymous function) @ angular.min.js:305q @ angular.min.js:7(anonymous function) @ angular.min.js:305$digest @ angular.min.js:143$apply @ angular.min.js:146l @ angular.min.js:97J @ angular.min.js:102t.onload @ angular.min.js:103 angular.min.js:118 Error: [$interpolate:interr] http://errors.angularjs.org/1.5.8/$interpolate/interr?p0=%7B%7Bpost.youtube…ecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y at Error (native) at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:6:412 at Function.Ka.interr (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:210:135) at J (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:104:438) at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:128:471 at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:127:103 at m.$digest (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:143:43) at m.$apply (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:146:113) at l (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:97:322) at J (http://127.0.0.1:8000/static/common/angular/js/angular.min.js:102:34)(anonymous function) @ angular.min.js:118(anonymous function) @ angular.min.js:90J @ angular.min.js:104(anonymous function) @ angular.min.js:128(anonymous function) @ angular.min.js:127$digest @ angular.min.js:143$apply @ angular.min.js:146l @ angular.min.js:97J @ angular.min.js:102t.onload @ angular.min.js:103

How can I add this?

Answer 1

I found the answer here: External resource not being loaded by AngularJs

app.filter('trusted', ['$sce', function ($sce) {
   return $sce.trustAsResourceUrl;
}]);

Then specify the filter in ng-src:

<video controls poster="img/poster.png">
       <source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>