0

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

Thinker
  • 4,664
  • 9
  • 48
  • 119
  • What's the full error you're receiving? – rnevius Mar 25 '16 at 11:53
  • Refused to display 'https://www.youtube.com/watch?v=ItIEG9d2ZH0*' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. This error I see in my chrome console. I have modified the url here with a * as it is a private video! – Thinker Mar 25 '16 at 12:16
  • Possible duplicate of [embed youtube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'](http://stackoverflow.com/questions/25661182/embed-youtube-video-refused-to-display-in-a-frame-because-it-set-x-frame-opti) – rnevius Mar 25 '16 at 12:42
  • Yes problem is same but in the accepted solution he is hardcoding the url in iframe, which works for me as well. However I want to add it {{ url }} like this. – Thinker Mar 25 '16 at 13:01
  • Then pass it as `{{ url }}`...The issue you're experiencing is still a duplicate of that question. `{{ url }}` just needs to be changed to the proper format. – rnevius Mar 25 '16 at 13:04
  • The original url which is fetched from the backend is https://youtu.be/tlLEf1HGlS*, it does not have any watch or embed parameters. Only when you open it in a browser they appear. Am I missing something basic here? – Thinker Mar 25 '16 at 13:25
  • Yes, the "embed" URL is different than the "watch" url. Click on the "share" button on Youtube, and take a look at the "embed" section for the URL you should be using. – rnevius Mar 25 '16 at 13:28
  • So does it mean I have to modify the original url and add embed part manually before including in iframe ng-src? Any tutorials for that? – Thinker Mar 26 '16 at 08:46

1 Answers1

0

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

Jtuck
  • 170
  • 2
  • 6