iframe not working in Ionic app on Android

Question

In my Ionic project I want to add in an iframe for a Vimeo video. This is working fine when I'm testing the app on my localhost as well as on my server, but on Android it doesn't seem to work. It says the webpage is unable to load because of the following error: 'net::ERR_FILE_NOT_FOUND'.

This is the iframe code:

<iframe src="//player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

I have already added the whitelist plugin, which is working fine with Ajax requests to other sites, but the iframe still doesn't seem to work. Any suggestions?

Answer 1

You have to add that frame definition in Meta data tag

frame-src * 'self'
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://iframe url">

then add the following meta tag in your config.xml cordova file:

<access origin="*"/>
<allow-navigation href="*"/>

Answer 2

You need to use a cordova plugin that allows you to implement a whitelist policy for navigating the application Webview on Cordova >= 4.0.

Install this plugin in your Ionic 1 project using

 ionic plugin add cordova-plugin-whitelist

Then add the following lines to the config.xml file to allow loading external URL's:

<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>

Answer 3

If you are using cordova 5.0 or above then add the white-list plugin.

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

Answer 4

Got it. Just adding http:// before the link was enough to get it to work. Now it looks like this:

<iframe src="http://player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>