2

I have a Phonegap app for iOS that allows for Wisita videos to be embedded in an iFrame.

When I try to view these videos on a mobile iOS device, these videos never appear (as if nothing was contained in the iFrame).

The embed code I am using is as follows: 

<iframe>
<script src="//fast.wistia.com/embed/medias/foobar.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_foobar" style="height:349px">&nbsp;</div>
</iframe>

EDIT - I have also now tried the following embed code: 

<iframe class="wistia_embed" frameborder="0" id="iframe-content" name="wistia_embed" scrolling="no" src="//fast.wistia.net/embed/iframe/foobar?videoFoam=true">
</iframe>
<script src="//fast.wistia.net/assets/external/iframe-api-v1.js"></script>

Note that both of these methods of embedding work fine on Google Chrome on desktop.

I found the following on Wistia's Status page for the inline playback for mobile rollout under "known issues":

  • iframe embeds will continue to use the native mobile player. These two don't currently play nicely together in iOS (the fullscreen control won't work with iframe embeds).

Does anyone know how to get Wistia embeds working on an iOS device in an iFrame?

tommybond
  • 650
  • 6
  • 19

1 Answers1

1

You have to provide a protocol to those urls, in Cordova apps if you don't provide one, then file: will be used.

So, add http: or https: before the // on every src of your example.

Also, you will have to allow the navigation to those urls inside the app, so you have to add the allow-navigation tag to your config.xml like this:

<allow-navigation href="http://fast.wistia.com/*" />
<allow-navigation href="http://fast.wistia.net/*" />

or this ones if you added https

<allow-navigation href="https://fast.wistia.com/*" />
<allow-navigation href="https://fast.wistia.net/*" />
jcesarmobile
  • 51,328
  • 11
  • 132
  • 176