loading iframe src with Angular JS - Error

Question

I am working on a project that pulls in youtube videos.

Originally this was working with an older verison of Angular (v1.0.6), however, when using the latest version (v1.2+) I'm getting an error in the console, causing the videos to not load

Appreciate any information that could help.

Error: [$interpolate:noconcat] http://errors.angularjs.org/1.2.26/$interpolate/noconcat?p0=%2F%2Fwww.youtube.com%2Fembed%2F%7B%7Bvideo.videoid%7D%7D

Here's the markup .

 <html ng-app="myApp" >

  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" ></script>

  </head>

  <body ng-controller="Mycontroller" >

     <ul>
       <li ng-repeat="video in videos">
       <iframe width="560" height="315" ng-src="//www.youtube.com/embed/{{video.videoid}}" frameborder="0" allowfullscreen></iframe>
       </li>
    </ul>


  </body>

JS

<script>

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

myApp.controller('Mycontroller', function ($scope) {
 $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

});

</script>

Did you look at the error message url provided: docs.angularjs.org/error/$interpolate/noconcat — Vadim
– Vadim, Commented Oct 31, 2014 at 15:27
DUPLICATE: stackoverflow.com/questions/19289402/… AND stackoverflow.com/questions/19312045/angularjs-with-i-frame — Rodney G
– Rodney G, Commented Oct 31, 2014 at 15:35

dave · Accepted Answer · 2014-10-31 16:20:47Z

3

You need to use $sce.trustAsResourceUrl

myApp.controller('Mycontroller', function ($scope, $sce) {
  $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

 $scope.getVideoUrl = function(url) {
     return $sce.trustAsResourceUrl("//www.youtube.com/embed/" + url);
 }

 <iframe width="560" height="315" ng-src="{{getVideoUrl(video.videoid)}}" frameborder="0" allowfullscreen></iframe>

edited Oct 31, 2014 at 16:20

answered Oct 31, 2014 at 15:36

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

gregdevs Over a year ago

Yup this works, justa slight change to ng-src attribute {{getVideoUrl(video.videoid)}} . Thanks!

Collectives™ on Stack Overflow

loading iframe src with Angular JS - Error

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related