Problem with youtube video content loading in an iFrame for iOS app

0
Part of the app is pulling in helpful articles for the user from an API.  Some of those articles contain interactive content and youtube video.  Tho media uses iframe which doesn't work on iOS.  I tried the JW player addon as suggested in another question but wasn't successful.  Any suggestions or solutions is appreciated.
asked
3 answers
6

Hi Andrew,We have embedded youtube in apps for a long time.

On your page use a format string widget for displaying an embedded youtube video. Use this html and use the youtube ID from your entity (${YoutubeVideoID}). It uses default Bootstrap classes 

 

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/${YoutubeVideoID}?rel=0" style="width: 100%; " allowfullscreen ></iframe>
</div>

 

If you use phonegap please add this snippet in your config.xml of your phonegap package:

    <!-- allow assets to be loaded and open links in the app itself, see: http://phonegap.com/blog/2012/03/20/access-tags/ -->
    <!-- Issue 204079: Allow retrieval of any resource. Custom widgets can point to anything. -->
    <access origin="*" />
    <allow-navigation href="*://*youtube.com" />
answered
2

Hi Andrew,

I assume you tried using the embedding provided by YouTube? As far as I know iframe does work on iOS. However, the issue comes from the height attribute.

 

Try to add this to the parent container:

 -webkit-overflow-scrolling:touch; overflow:auto;

*Not tested*

Other: Another tutorial

answered
-1

It can be solved in a simple way just use the youtube embed plugin, that's for comfortable to use and user-friendly and won't break pages.

answered