Use AngularJS with vimeo Player

Question

I'm trying to display a vimeo player from a JSON file with AngularJS. When I run my app I've got this message in the console:

Error: [$interpolate:interr] Can't interpolate: {{videos}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: http://player.vimeo.com/video/xxxxx
http://errors.angularjs.org/1.2.16/$sce/insecurl?p0=http%3A%2F%2Fplayer.vimeo.com%2Fvideo%2Fxxxxx
http://errors.angularjs.org/1.2.16/$interpolate/interr?p0=%7B%7Bvideos%7D%7…insecurl%3Fp0%3Dhttp%253A%252F%252Fplayer.vimeo.com%252Fvideo%252xxxx
    at http://localhost:8000/bower_components/angular/angular.js:78:12
    at $interpolate.fn (http://localhost:8000/bower_components/angular/angular.js:8637:26)
    at attrInterpolatePreLinkFn (http://localhost:8000/bower_components/angular/angular.js:6893:30)
    at nodeLinkFn (http://localhost:8000/bower_components/angular/angular.js:6559:13)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:5986:15)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:5989:13)
    at publicLinkFn (http://localhost:8000/bower_components/angular/angular.js:5891:30)
    at boundTranscludeFn (http://localhost:8000/bower_components/angular/angular.js:6005:21)
    at controllersBoundTransclude (http://localhost:8000/bower_components/angular/angular.js:6600:18)
    at ngRepeatAction (http://localhost:8000/bower_components/angular/angular.js:20084:15)

My HTML:

<div class="videoWrapper" ng-repeat="videos in project.pr_video track by $index">
    <iframe ng-src="{{videos}}" width="560" height="349" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

I don't understand how to tell to Angular that Vimeo is a trusted host. Anyone can explain it to me?

Anthony Chu · Accepted Answer · 2014-04-21 15:07:59Z

2

You can use $sce.getTrustedResourceUrl() to trust the URL...

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

myApp.controller('myController', ['$scope', '$sce', function ($scope, $sce) {
    $scope.videos = $sce.getTrustedResourceUrl('http://player.vimeo.com/video/xxxxx');
}]);

You can optionally configure $sceDelegateProvider to white list the URLs.

answered Apr 21, 2014 at 15:07

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

1 Comment

testoverblaireau Over a year ago

Where do i have to use $sce ? in app.js ? Or in my controller ?

Collectives™ on Stack Overflow

Use AngularJS with vimeo Player

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related