离子iframe ng-src youtube视频链接不起作用

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

我是Ionic的新手,我正在尝试用离子1构建一个应用程序。除了ng-src中的视频URL,一切正常。这是我的代码

$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'

拒绝显示'youtube.com/watch?v=4me16JMuBbs';在一个框架中,因为它将'X-Frame-Options'设置为'SAMEORIGIN'

2 个解决方案

#1

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不允许将其嵌入到iFrame中

youtube.com/watch?v=4me16JMuBbs

This is the correct URL

这是正确的URL

youtube.com/embed/4me16JMuBbs

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

对于YouTube,您可以这样做(您应该测试每个网址是否具有相同的格式)

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

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

对于Vimeo,你可以这样做(你也应该测试它):

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

#2

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);

}

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

#1