3 Replies Latest reply on Jun 13, 2016 1:44 PM by kerrishotts

    youtube videos not working on ios

    erkanç32739087

      I have been trying to solve an issue for 3 days. I searched on internet and tried different solutions including youtube api player but nothing worked out.

       

      I used iFrame also tried different tags like video,object to play youtube videos in my phonegap project. It works perfectly for Android but when i test it with IOS, it is not working. It only shows white blank screen in iframe. I dont know why i am having such an issue on IOS.

       

      Additionally, When i try build.phonegap and choose ipad as device, videos working.

      But when i use phonegap developer app on ios and test it then videos not working.

       

      Please help. What am i missing ?

       

      I added js and config.xml files below

       

      js.png

       

       

       

          <?xml version="1.0" encoding="UTF-8"?>

       

       

      <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->

      <widget xmlns     = "http://www.w3.org/ns/widgets"

              xmlns:gap = "http://phonegap.com/ns/1.0"

              id        = "sa.s.s"

              versionCode = "1"

              version   = "2.2.1">

       

       

          <name>s</name>

         <preference name="stay-in-webview" value="true" />

          <preference name="AllowInlineMediaPlayback" value="true" />

          <description>

       

       

          </description>

       

       

          <author href="http://ss.com" email="info@ss.com">

              s s Team

          </author>

      <allow-navigation href="*"/>

          <!-- Define the main entry-point to the application -->

          <content src="index.html" />

       

       

          <!-- Customize your app and platform with the preference element. -->

          <preference name="DisallowOverscroll"         value="true" />

          <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->

          <preference name="android-minSdkVersion"      value="14" />

       

       

          <!-- Define a specific version of PhoneGap to build into your app. -->

          <!-- <preference name="phonegap-version"       value="cli-6.0.0" /> -->

       

       

          <!-- Plugins -->

          <!-- Core plugins -->

              <preference name="permissions" value="none"/>

      <!--    <plugin name="cordova-plugin-battery-status"      source="npm" spec="~1.1.1" />-->

          <plugin name="cordova-plugin-console"             source="npm" spec="~1.0.2" />

          <plugin name="cordova-plugin-device"              source="npm" spec="~1.1.1" />

      <!--

          <plugin name="cordova-plugin-device-motion"       source="npm" spec="~1.2.0" />

          <plugin name="cordova-plugin-device-orientation"  source="npm" spec="~1.0.2" />

          <plugin name="cordova-plugin-globalization"       source="npm" spec="~1.0.3" />

      -->

          <plugin name="cordova-plugin-inappbrowser"        source="npm" spec="~1.3.0" />

          <plugin name="cordova-plugin-whitelist"           source="npm" spec="~1.2.1" />

       

       

       

       

          <!-- Define app icon and splashscreen for each platform. -->

       

       

          <platform name="android">

          <preference name="permissions" value="none"/>

       

       

               <icon   src="res/icon/android/drawable-mdpi-icon.png"               density="mdpi" />

              <icon   src="res/icon/android/drawable-hdpi-icon.png"               density="hdpi" />

              <icon   src="res/icon/android/drawable-xhdpi-icon.png"              density="xhdpi" />

              <icon   src="res/icon/android/drawable-xxhdpi-icon.png"             density="xxhdpi" />

              <icon   src="res/icon/android/drawable-xxxhdpi-icon.png"            density="xxxhdpi" />

          </platform>

       

       

          <platform name="ios">

       

       

               <icon   src="res/icon/ios/icon.png"            platform="ios" width="57"   height="57" />

              <icon   src="res/icon/ios/icon@2x.png"          platform="ios" width="114"  height="114" />

              <icon   src="res/icon/ios/icon-40.png"          platform="ios" width="40"   height="40" />

              <icon   src="res/icon/ios/icon-40@2x.png"       platform="ios" width="80"   height="80" />

              <icon   src="res/icon/ios/icon-50.png"          platform="ios" width="50"   height="50" />

              <icon   src="res/icon/ios/icon-50@2x.png"       platform="ios" width="100"  height="100" />

              <icon   src="res/icon/ios/icon-60.png"          platform="ios" width="60"   height="60" />

              <icon   src="res/icon/ios/icon-60@2x.png"       platform="ios" width="120"  height="120" />

              <icon   src="res/icon/ios/icon-60@3x.png"       platform="ios" width="180"  height="180" />

              <icon   src="res/icon/ios/icon-72.png"          platform="ios" width="72"   height="72" />

              <icon   src="res/icon/ios/icon-72@2x.png"       platform="ios" width="144"  height="144" />

              <icon   src="res/icon/ios/icon-76.png"          platform="ios" width="76"   height="76" />

              <icon   src="res/icon/ios/icon-76@2x.png"       platform="ios" width="152"  height="152" />

              <icon   src="res/icon/ios/icon-small.png"       platform="ios" width="29"   height="29" />

              <icon   src="res/icon/ios/icon-small@2x.png"    platform="ios" width="58"   height="58" />

              <icon   src="res/icon/ios/icon-small@3x.png"    platform="ios" width="87"   height="87" />

          </platform>

       

       

       

       

          <platform name="wp8">

       

       

          </platform>

       

       

          <platform name="windows">

       

       

       

       

          </platform>

       

       

          <!--

              Define access to external domains.

       

       

              <access />            - a blank access tag denies access to all external resources.

              <access origin="*" /> - a wildcard access tag allows access to all external resource.

       

       

              Otherwise, you can specify specific domains:

          -->

          <access origin="*"  browserOnly="false" />

       

       

          <allow-intent href="http://*/*" />

          <allow-intent href="https://*/*" />

          <allow-intent href="tel:*" />

          <allow-intent href="sms:*" />

          <allow-intent href="mailto:*" />

          <allow-intent href="geo:*" />

          <access origin="*" browserOnly="false"/>

          <platform name="android">

              <allow-intent href="market:*" />

                <allow-intent href="*"/>

          <allow-navigation href="*" />

          </platform>

          <platform name="ios">

              <access origin="*" />

              <allow-intent href="itms:*" />

              <allow-intent href="itms-apps:*" />

                <allow-intent href="*"/>

       

       

          <allow-navigation href="*" />

          </platform>

       

       

      </widget>

        • 1. Re: youtube videos not working on ios
          kerrishotts Adobe Community Professional

          Quick thoughts:

           

          1. Reduce duplication of your access, allow-intent, and allow-navigation tags in your config.xml. I doubt that's the issue, but there's no reason for duplication. Also remove "browserOnly=false" unless you have a very good reason for it. It's also hard to follow the file a little with some of the formatting difficulties -- can you post a gist link or post as code using the Advanced editor (Use advanced editor, then click the >> button > Syntax Highlighting > XML)
          2. It works when you build from PhoneGap Build, but not from the PG Developer App? I want to be absolutely clear wrt the scenarios your code works and doesn't work:
            1. What version of the PG Developer App are you using? Are you using it with the PG Desktop App or with the PhoneGap CLI ("phonegap serve")?
            2. Are you building with the local CLI as well? If so, what version is installed (as well as versions of the platforms you have installed into your project)?
          3. Try to debug your project using Safari and see if there are any interesting logs being generated in the JavaScript console.
          4. Can you share your index.html file (at least the HEAD portion)?
          • 2. Re: youtube videos not working on ios
            erkanç32739087 Level 1
            • I did remove duplicates and shared xml formatted
            • It works when i test it on  emulate.phonegap.com but not when i test it on the device using phonegap developer app. It doesnt work.
            • I am using latest version of phongap developer app and I am using it with PG desktop.
            • I am not building with local CLI but version is 6.2.6.
            • I shared Index.html

            thx

             

             

            
              <?xml version="1.0" encoding="UTF-8"?>
            
            
            
            
              <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
              <widget xmlns     = "http://www.w3.org/ns/widgets"
              xmlns:gap = "http://phonegap.com/ns/1.0"
              id        = "sa.ss.ssu"
              versionCode = "118"
              version   = "2.2.1">
            
            
            
            
            
            
              <name>ss ssü</name>
                
              <!--<preference name="AllowInlineMediaPlayback" value="true" -->
              <description>
            
              </description>
              <preference name="stay-in-webview" value="true" />
              <author href="http://ss.com" email="info@ss.com">
              ss ssü Team
              </author>
            
              <meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; child-src *; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'"/>
            
            
            
            
              <allow-navigation href="*"/>
              <!-- Define the main entry-point to the application -->
              <content src="index.html" />
            
            
            
            
              <!-- Customize your app and platform with the preference element. -->
              <preference name="DisallowOverscroll"         value="true" />
              <!--<preference name="OpenAllWhitelistURLsInWebView"         value="yes" /> -->
            
              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
              <preference name="android-minSdkVersion"      value="14" />
            
            
            
            
              <!-- Define a specific version of PhoneGap to build into your app. -->
              <!-- <preference name="phonegap-version"       value="cli-6.0.0" /> -->
            
            
            
            
              <!-- Plugins -->
              <!-- Core plugins -->
              <preference name="permiions" value="none"/>
              <!--    <plugin name="cordova-plugin-battery-status"      source="npm" spec="~1.1.1" />-->
              <plugin name="cordova-plugin-console"             source="npm" spec="~1.0.2" />
              <plugin name="cordova-plugin-device"              source="npm" spec="~1.1.1" />
              <!--
              <plugin name="cordova-plugin-device-motion"       source="npm" spec="~1.2.0" />
              <plugin name="cordova-plugin-device-orientation"  source="npm" spec="~1.0.2" />
              <plugin name="cordova-plugin-globalization"       source="npm" spec="~1.0.3" />
              -->
              <plugin name="cordova-plugin-inappbrowser"        source="npm" spec="~1.3.0" />
              <plugin name="cordova-plugin-whitelist"           source="npm" spec="~1.2.1" />
            
            
            
            
              <!-- Define app icon and splashscreen for each platform. -->
            
              <platform name="android">
               <preference name="permiions" value="none"/>
            
              <icon   src="res/icon/android/drawable-mdpi-icon.png"               density="mdpi" />
              <icon   src="res/icon/android/drawable-hdpi-icon.png"               density="hdpi" />
              <icon   src="res/icon/android/drawable-xhdpi-icon.png"              density="xhdpi" />
              <icon   src="res/icon/android/drawable-xxhdpi-icon.png"             density="xxhdpi" />
              <icon   src="res/icon/android/drawable-xxxhdpi-icon.png"            density="xxxhdpi" />
              </platform>
            
            
            
            
              <platform name="ios">
            
            
              <icon   src="res/icon/ios/icon.png"            platform="ios" width="57"   height="57" />
              <icon   src="res/icon/ios/icon@2x.png"          platform="ios" width="114"  height="114" />
              <icon   src="res/icon/ios/icon-40.png"          platform="ios" width="40"   height="40" />
              <icon   src="res/icon/ios/icon-40@2x.png"       platform="ios" width="80"   height="80" />
              <icon   src="res/icon/ios/icon-50.png"          platform="ios" width="50"   height="50" />
              <icon   src="res/icon/ios/icon-50@2x.png"       platform="ios" width="100"  height="100" />
              <icon   src="res/icon/ios/icon-60.png"          platform="ios" width="60"   height="60" />
              <icon   src="res/icon/ios/icon-60@2x.png"       platform="ios" width="120"  height="120" />
              <icon   src="res/icon/ios/icon-60@3x.png"       platform="ios" width="180"  height="180" />
              <icon   src="res/icon/ios/icon-72.png"          platform="ios" width="72"   height="72" />
              <icon   src="res/icon/ios/icon-72@2x.png"       platform="ios" width="144"  height="144" />
              <icon   src="res/icon/ios/icon-76.png"          platform="ios" width="76"   height="76" />
              <icon   src="res/icon/ios/icon-76@2x.png"       platform="ios" width="152"  height="152" />
              <icon   src="res/icon/ios/icon-small.png"       platform="ios" width="29"   height="29" />
              <icon   src="res/icon/ios/icon-small@2x.png"    platform="ios" width="58"   height="58" />
              <icon   src="res/icon/ios/icon-small@3x.png"    platform="ios" width="87"   height="87" />
              </platform>
            
            
            
            
            
            
            
            
              <platform name="wp8">
            
            
            
            
              </platform>
            
            
            
            
              <platform name="windows">
            
            
            
            
            
              </platform>
            
            
            
            
              <!--
              Define acce to external domains.
            
            
            
            
              <acce />            - a blank acce tag denies acce to all external resources.
              <acce origin="*" /> - a wildcard acce tag allows acce to all external resource.
            
            
            
            
              Otherwise, you can specify specific domains:
              -->
              <acce origin="*"/>
            
            
            
            
              <allow-intent href="http://*/*" />
              <allow-intent href="https://*/*" />
              <allow-intent href="tel:*" />
              <allow-intent href="sms:*" />
              <allow-intent href="mailto:*" />
              <allow-intent href="geo:*" />
               <allow-intent href="*"/>
              <platform name="android">
              <allow-intent href="market:*" />
              </platform>
              <platform name="ios">
              <preference name="stay-in-webview" value="true" />
              <allow-intent href="itms:*"/>
              <allow-intent href="itms-apps:*" />
              </platform>
               </widget>
            

             

            <code>

            <xmp>

            <!DOCTYPE html>

            <html lang="tr">

             

             

            <head>

                <meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <meta name="description" content="">

                <meta name="author" content="">

             

             

                <title>Sözler Köşkü</title>

             

             

                <!-- Bootstrap Core CSS -->

                <link href="css/bootstrap.css" rel="stylesheet" type="text/css">

                <!-- Fonts -->

                <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

                <link href="css/styles.css" rel="stylesheet">

                <script src="testforfiles.js"></script>

              <script src="js/jquery.js"></script>

              <script src="js/mediaelement-and-player.min.js"></script>

              <link rel="stylesheet" href="css/mediaelementplayer.min.css" />

               

            </head>

             

             

            <body>

                <div class="">

                    <div  style="text-align:center">

                        <div class="">

                            <img src="img/logo.jpg"  class="img-responsive" >

                           

                        </div>

                    </div>

                </div>

                <nav class="navbar nav navbar-default" role="navigation">

                    <div class="">

                        <!-- Collect the nav links, forms, and other content for toggling -->

                        <div class="container">

                            <div class="">

                                <div class="">

                                    <ul class="nav ">

                                        <li class="pull-left"><a id='geri'  style="color:#fff; margin-top:5px; font-size:11px;"><i  class="fa fa-chevron-left"></i><i  class="fa fa-chevron-left"></i> <strong> GERİ </strong></a></li>

             

             

                                    </ul>

                                </div>

                            </div>

                           

                        </div>

                        <!-- /.navbar-collapse -->

                    </div>

                    <!-- /.container-fluid -->

                </nav>

                <div class="lib-panel" style="width:95%; margin-left:2%;">

                    <div class="row box-shadow">

                        <div class="">

                            <div id="player">

                               

                            </div>

                            <div class="col-xs-12">

                                <div class="lib-row lib-header">

                                    <span style="font-size:14px; color:black">

                                        <b id="title"></b>

                                    </span>

                                    <div class="lib-header-seperator">

                                    </div>

                                    <div class="lib-row lib-desc">

                                        <p style="font-size:12px;" id="description"></p>

                                    </div>

                                </div>

                                </div>

                        </div>

                    </div>

             

                </div>

             

               

             

             

               

                <script src="js/jquery.min.js"></script>

                <script src="js/bootstrap.min.js"></script>

                <script type="text/javascript" src="js/videoPlayer.js"></script>

             

             

             

            </body>

             

             

            </html>

            </code>

            </xmp>

            • 3. Re: youtube videos not working on ios
              kerrishotts Adobe Community Professional

              Thanks. Thoughts:

               

              1. Your content-security-policy meta tag is in the wrong place. It shouldn't be in config.xml, but in the HEAD of index.html.

              2. Your config.xml has "acce" instead of "access".

              3. emulate.phonegap.com won't tell you a lot about how something will or won't work on a physical device

              4. desktop/developer app is great, but it has its share of edge cases. Unless you create a build using either the CLI or PhoneGap Build, it's hard to know if it's the dev app getting in the way or a problem with your code. So I always suggest that it's wise to try a CLI/PGB build just to make sure that the problem also occurs in a fully built app.