JS Controller Code
var app = angular.module("app", []);
app.controller("controller", function ($scope) {
$scope.videos = [
{
"url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
"date": "2016-05-11"
},
{
"url": "https://www.youtube.com/watch?v=6vE0oFFSE7c",
"date": "2016-05-11"
}
];
});
app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
var video_id = url.split('v=')[1].split('&')[0];
return $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + video_id);
};
}]);
HTML Code
<div ng-controller="controller">
<div ng-repeat="video in videos | orderBy: '-date'" style="padding:20px">
<div>
<iframe width="560" height="315" ng-src="{{video.url | trusted}}"
frameborder="0" allowfullscreen></iframe>
<p>Display output for control reasons: {{video.url | trusted}}</p>
</div>
</div>
</div>
Conclusion
app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
}]);
and use filter in ng-repeat its working
<iframe ng-src="{{x.url | trusted}}"></iframe>