在离子2应用中使用iframe播放youtube视频

Question

在Ionic 2应用中，我尝试使用iframe嵌入一个youtube视频。代码如下所示：

<iframe width="320" height="315" src="https://www.youtube.com/embed/VIDEOID?autoplay=1&controls=1" frameborder="0" allowfullscreen></iframe> 

但是，当我导航到页面时，出现此错误。我无法找到一个很好的答案如何解决这个问题。

XMLHttpRequest无法加载https://googleads.g.doubleclick.net/pagead/id。当凭证标志为真时，'Access-Control-Allow-Origin'标头中不能使用通配符'*'。因此'Origin'https://www.youtube.com'不允许访问。 XMLHttpRequest的凭证模式由withCredentials属性控制。

不知道如何解决这个问题。任何帮助/领导将不胜感激。

顺便说一句，我正在开发/测试铬浏览器开发工具。

感谢，

Answer 1

你最好添加到您的config.xml：

<preference name="AllowInlineMediaPlayback" value="true"/> 
<access origin="*" subdomains="true" /> 

另外，还要确保您的Android清单有：

<application android:hardwareAccelerated="true" ...> 

Answer 2

我已经编辑两个解决iframe问题html_sanitizer.js文件。您可以在node_modules\@angular\platform-browser\src\security和node_modules\@angular\platform-browser\esm\src\security文件夹下找到它们。

打开它们并搜索该行var BLOCK_ELEMENTS，插入iframe标签名称并保存。现在它应该可以工作，至少它适用于我。