Embed YouTube Videos with ngRepeat AngularJS

0
646

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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here