CODEWITHSUNDEEP
javascriptangularjsiframeionic-framework
user1955726
user1955726

Reputation: 23

ionic iframe ng-src youtube video link not working

I am new to Ionic, I am trying to build an app with ionic 1. Everything is working fine except video URL in ng-src. Here is my code

$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
<iframe width="100%" height="315" ng-src="{{trustSrc(guide.video_url)}}" frameborder="0" allowfullscreen></iframe>

Refused to display 'youtube.com/watch?v=4me16JMuBbs'; in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Upvotes: 1

Views: 1209

Answers (2)

Devid Farinelli
Devid Farinelli

Reputation: 7554

You should modify your video URL to the embeddable version:

This is your URL that doesn't work because YouTube doesn't allow to embed it into an iFrame

youtube.com/watch?v=4me16JMuBbs

This is the correct URL

youtube.com/embed/4me16JMuBbs

For YouTube you can do it this way (you should test if every URL has the same format)

url.replace('watch?v=', 'embed/')

For Vimeo you can do it this way (you should test it too): 

url.replace('vimeo.com', 'player.vimeo.com/video')

Upvotes: 2

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3138

Try this 

<iframe width="100%" height="315" ng-bind-html="trustAsResourceUrl" frameborder="0" allowfullscreen></iframe>


in your controller first add `'$sce' then

$scope.trustSrc = function(src) {
$scope.trustAsResourceUrl = $sce.trustAsHtml(//Your URL code);

}

OR

<iframe width="100%" height="315" src="{{trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

Upvotes: 0

Related Questions