Getting Angular error: [$interpolate:interr]

Question

I was trying to concatenate https://www.youtube.com/embed/ with $ctrl.video.id.videoIdso what I did is:

 <iframe class="embed-responsive-item" src="{{'https://www.youtube.com/embed/' + $ctrl.video.id.videoId}}" allowFullScreen></iframe>

But this gives us an error:

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: https://www.youtube.com/embed/OPxeCiy0RdY
http://errors.angularjs.org/1.6.9/$sce/insecurl?p0=https%3A%2F%2Fwww.youtube.com%2Fembed%2FOPxeCiy0RdY
http://errors.angularjs.org/1.6.9/$interpolate/interr?p0=%7B%7B'https%3A%2F%2Fwww.youtube.com%2Fembed%2F'%20%2B%20%24ctrl.video.id.videoId%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Fwww.youtube.com%2Fembed%2FOPxeCiy0RdY%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FOPxeCiy0RdY
    at angular.js:116
    at Function.$interpolateMinErr.interr (angular.js:12922)
    at parseStringifyInterceptor (angular.js:13258)
    at Array.regularInterceptedExpression (angular.js:16777)
    at interpolationFn (angular.js:13230)
    at Object.attrInterpolatePreLinkFn (angular.js:10510)
    at angular.js:1383
    at invokeLinkFn (angular.js:10619)
    at nodeLinkFn (angular.js:9985)
    at compositeLinkFn (angular.js:9248)
(anonymous) @ angular.js:14800

Search on some threads and found some possible solution in stack overflow so edited the main module and put a filter function in there for trustUrl:

angular.module('video-player', [])
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
})
.filter('trustUrl', function ($sce) {
    return function(url) {
      return $sce.trustAsResourceUrl(url);
}
});

But still no luck. I don't know what's causing this error.

Did you add the filter to your HTML code? You have to add `| trustUrl` after the text you want to trust, as mentioned [here](https://stackoverflow.com/a/24875326/215552), where I'm assuming you took the code from. You should always link back to posts if you copy code from them. See https://meta.stackexchange.com/q/126414/194720 and https://meta.stackoverflow.com/q/316496/215552 — Heretic Monkey, Feb 12 '18 at 01:21

score 0 · Answer 1 · answered Feb 12 '18 at 02:11

You can have a function to generate the url in controller as follows,

DEMO

var app = angular.module('myApp', []);

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

app.controller('videoController', ['$scope',
  function MyCtrl($scope) {

   $scope.youtubevideo="https://www.youtube.com/embed/c-z9M6KZs_0";

    $scope.getIframeSrc = function(src) {
      return  src;
    };
  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="videoController">

  <div class="thumbnail">
    <div class="video-container">
      <iframe width="100%" ng-src="{{getIframeSrc(youtubevideo)}}" frameborder="0 " allowfullscreen></iframe>
    </div>
  </div>

</body>

</html>

The issue is with the code snippet runner, check here http://plnkr.co/edit/CqBEu6iyWpNhwoI08Mtv?p=preview — Sajeetharan, Feb 12 '18 at 04:07

Getting Angular error: [$interpolate:interr]

1 Answers1