youtube iframe not working anymore?

[ABECON Groep BV]

I use an iframe to view a YouTube movie.

It works with cordova 4.0 but it doesnt with 5.2.0.
the iframe has a width of 1px.

Is there a fix for this issue?

<iframe src="https://player.vimeo.com/video/171778255?autoplay=1&loop=1&automute=0" style="height:100%;width:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 

 

 

 

 

 

[Preslav]

Hi,

I was able to reproduce the issue on iOS devices with Cordova versions 5.0.0/5.2.0, it is working as expected on Android.

Looking at this and this threads, I assume that the problem comes from Cordova whitelist system which was introduced with Cordova 5.0.0. I've tried to whitelist all URLs the WebView itself can be navigated to, give permission to all access origins and adding a proper security meta tag but nothing of the above worked for me. 

I will continue my investigation and if I come to a proper solution, I will update this thread with it. 

Regards,
Preslav
Telerik by Progress

 

 

[Preslav]

Hello,

The issue was indeed whitelist related. To load an iframe on iOS devices with Cordova versions 5.0.0/5.2.0, there should be "CDVIntentAndNavigationFilter" plugin added to the config.xml file.

This said, to fix the faulty behavior you can:

1. Open the iOS Config.xml file in your project, by following the steps outlined here.
2. In that file, add the following code before the closing "</widget>" tag:

   <feature name="IntentAndNavigationFilter">
     <param name="ios-package" value="CDVIntentAndNavigationFilter"/>
     <param name="onload" value="true"/>
   </feature>

3. After that, you should also add the following line in the same file:

   <allow-navigation href="https://player.vimeo.com/video/171778255" />

The same functionality, could be achieved by whitelisting all URLs:

<allow-navigation href="*" />

However, due to security reasons, I'd recommend allowing only the links the app will be navigated to.

Let me know if that worked for you. 

Regards, Preslav
Telerik by Progress