My HTML page looks like this:
<div>
<iframe margin="0" padding="0" border="none" width="420" height="345" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
'exercise_video_url' I am setting in my controller like following:
$http.get("https://localhost:8000/api/exercises/initial/").then(function(response){
$scope.initial_data=response.data;
angular.forEach($scope.initial_data, function(item){
$scope.exercise_type=item.exercise_type;
$scope.exercise_description=item.description;
$scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
})
I am fetching a particular exercise related information from my Django view, exercise model has a video_url as an attribute. I read somewhere and injected $sce service in my angular controller.
the video link itself looks like 'https://youtu.be/******' --> * are few random characters. This link works fine independently if you hit it in a browser or give as a source to ng-src directly.
I also tried commenting 'django.middleware.clickjacking.XFrameOptionsMiddleware' in my settings.py