Youtube video not displaying IOS

Ionic Framework ionic-v3
1

Hi there

I embedded a youtube video inside my app and it is working perfectly on android devices(published) as well as in Ionic View(IPhone) devices but the video is not working once published on the app store (Ios).

There is only a blank screen.

<div class="video-container">
   	<iframe src='https://www.youtube.com/embed/0_cSXlUHRIc' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

These is the styling applied I applied

 //Youtube styling
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 100% !important;
    width: 100px !important;
    *width: 100% !important;
}

I also added this to my config .xml

 <preference name="AllowInlineMediaPlayback" value="true"/>
  <access origin="*" subdomains="true"/>
 <allow-navigation href="*://*.youtube.com/*" />

What could the reason be for the youtube video not displaying in the IOS 6/7 device?

2

What do the dev tools tell you? There’s probably some info in there, so you’ll need to look

3

Hi there

Did just that and this actually did the trick in the end

<allow-navigation href="*://*.youtube.com/*" />

Also added this this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.videoLink);

Thank you

8 Likes
5

Hi,
in which file did you add this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.videoLink); ?
I tried it in the javascript file of the videopage, but it didn’t work…

Thanks in advance

6

Did you fix it well then? If you encounter this problem still at present from time to time, then you could try the following tips.

  1. Uninstall and reinstall the faulty app.
  2. Force restart your iOS device.
  3. Use the ios recovery tool to resolve ios issues without data loss.
  4. Contact the official for advice.