Render youtube video by url from server

Question

I am prety sick already with inability to just embed a youtube video by url provided from database.

I have whitelisted youtube by

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

Then in controller I fetch video data from server (database) and use $sce to set url to be truested

app.controller('videosCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

    $scope.video = null;
    $scope.video_url = null;

    $http.get('/side/video').success(function(data) {
        if(data.length > 0) {
            $scope.video = data[0];
            $scope.video_url = $sce.trustAsResourceUrl(data[0].url);
        }   
    });

}]);

then I render iframe by (jade)

iframe(ng-src="{{video_url2}}",width="100%",height="300",frameborder="0",allowfullscreen)

And in result in chrome dev console I get

Refused to display 'https://www.youtube.com/watch?v=WN66EpVdxsk' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

What else should I do to convince angular that it's ok to render videos from youtube?!

SOLUTION: I have found that /watch refuses to stream videos from different origin, but www.youtube.com/embed/ allowes, so I just extracted video id from first url and added it to the second.

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

Seems like a CORS issue to me rather than an Angular issue if I'm not mistaken but I'm not sure how to get it fixed. check these question for a similar issue

edited May 23 '17 at 11:50

Community

1
1

answered Mar 14 '16 at 07:59

Raul A.

333
4
10

Render youtube video by url from server

1 Answers1