Play youtube videos using iframe in ionic 2 app

Question

In the Ionic 2 application, I am trying to embed one video from YouTube using an iframe. The code is as follows:

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

However, when I go to the page, I get this error. I can not find a good answer how to fix this.

XMLHttpRequest cannot load https://googleads.g.doubleclick.net/pagead/id . The wildcard '*' cannot be used in the Access-Control-Allow-Origin header when the credential flag is true. Origin ' https://www.youtube.com ' is therefore not allowed. The XMLHttpRequest credential mode is controlled by the withCredentials attribute.

I don’t know how to fix it. Any help / guidance would be appreciated.

BTW, I am developing / testing in a tool for developers of the Chrome browser.

Thanks,

Answer 1

You better add this to your config.xml:

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

Also make sure your android manifest has:

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

Answer 2

I solved the iframe problem by editing the two html_sanitizer.js . You can find them in the folders node_modules\@angular\platform-browser\src\security and node_modules\@angular\platform-browser\esm\src\security .

Open them and find this line var BLOCK_ELEMENTS , insert the name of the iframe tag and save. Now it should work, at least it works for me.

Answer 3

use enablejsapi = 1 inside the source