Embed YouTube videos using ng-repeat in Angular

Question

I am using ng-repeat directive in Angular to embed some videos fetched from server.

I get video IDs from server and I have following code:

Answer 1

Since 1.2 you can only bind one expression to *[src], *[ng-src] or action. You can read more about it here.

Use ng-src and change your HTML to:

ng-src="{{getIframeSrc(media.src)}}"

In the controller add:

$scope.getIframeSrc = function(src) {
  return 'https://www.youtube.com/embed/' + src;
};

Note that you need to specify the protocol.

You also need to add the URL as trusted by configuring the $sceDelegate service:

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

Demo: http://plnkr.co/edit/4U5HxNnVDwlF5udRiQa1?p=preview