1

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>
gregdevs
  • 703
  • 2
  • 11
  • 37
  • 2
    Did you look at the error message url provided: https://docs.angularjs.org/error/$interpolate/noconcat – Vadim Oct 31 '14 at 15:27
  • 1
    DUPLICATE: http://stackoverflow.com/questions/19289402/angular-js-scope-var-value-in-iframe AND http://stackoverflow.com/questions/19312045/angularjs-with-i-frame – Rodney G Oct 31 '14 at 15:35

1 Answers1

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>
dave
  • 62,300
  • 5
  • 72
  • 93