CODEWITHSUNDEEP
angularjsdjangodjango-viewsdjango-angular
Thinker
Thinker

Reputation: 5356

Django refused to display YouTube video in a iframe because it set 'X-Frame-Options' to 'SAMEORIGIN'

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

Upvotes: 0

Views: 1993

Answers (1)

Jtuck
Jtuck

Reputation: 310

Its your YouTube url your using, it needs to be the embed version. I just fixed similar issue on my site and worked.

Since your embedding it into an iframe it only makes since to use the YouTube embed url.

so example don't use the short url for embedding in iframes, use the embed url.

WRONG: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/watch?v=xWRNBOXoLf8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

RIGHT: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Use https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1

Upvotes: 1

Related Questions