CODEWITHSUNDEEP
iframeyoutubeionic2access-control
rout0802
rout0802

Reputation: 147

Playing youtube video using iframe in ionic 2 app

In an Ionic 2 app, I am trying to embed one youtube video using iframe. The code looks like this:

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

However when I navigate to the page I am getting this error. I can't find a good answer how to fix this.

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

Not sure how to fix this. Any help/lead would be appreciated.

BTW, I am developing/testing in chrome browser developer tool.

Thanks,

Upvotes: 2

Views: 3220

Answers (3)

Yogesh ravi
Yogesh ravi

Reputation: 41

Try using enablejsapi=1 inside the source.

Upvotes: 0

DroidX
DroidX

Reputation: 59

I have solved iframe problem by editing two html_sanitizer.js files. You ca find them under node_modules\@angular\platform-browser\src\security and node_modules\@angular\platform-browser\esm\src\security folders.

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

Upvotes: 0

user2674268
user2674268

Reputation: 231

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" ...>

Upvotes: 3

Related Questions