Youtube video not displaying IOS

#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?

Android - Youtube / Vimeo Video doesnt work anymore
#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

7 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