youtube iframe not working anymore?

3 posts, 0 answers
  1. ABECON Groep BV
    ABECON Groep BV avatar
    28 posts
    Member since:
    Apr 2007

    Posted 01 Sep Link to this post

    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>

     

     

     

     

     

     

  2. Preslav
    Admin
    Preslav avatar
    49 posts

    Posted 06 Sep Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Preslav
    Admin
    Preslav avatar
    49 posts

    Posted 12 Sep Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top