Link to youtube video in embedded youtube player is blocked on iOS


#1

My app has an embeded youtube player.
As described in youtube policy, the youtube logo inside the player should be clickable and open the youtube vidoe page or youtube app if avabilable. Somehow it does nothing when I clicked on it.

I think it was working with UIWebView and I’ve installed WkWebView now. Not sure if this is related.
I suspect it is due to incorrect config of whitelist? But I couldn’t figure that out.
Any idea?


#2

Hi @chanphillip did you ever get this to work?


#3

Hi
I think it’s restricted by iframe in WkWebView. I didn’t find a solution.
For now, I just add a invisible link on top of the logo…


#4

Wow. Thanks for shedding light on that.

Also, what video player did you use for playing youtube in your app? I’ve tried videogular but the request keeps getting cancelled. what worked for you.


#5

I use the official YouTube iframe API library


#7

Have you tried adding in your config.xml as outlined here?

That should allow you to embed an iframe and have it work on iOS without any plugins.


#8

Any more thoughts on this? I just migrated our app from beta.11 to 2.2.0 and now I’m having the same problem.

config.xml

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

content.ts

import { DomSanitizer } from '@angular/platform-browser';

content.html

<div [innerHTML]="_DomSanitizationService.bypassSecurityTrustHtml(body)"></div>

This is the inserted body html

<h1>Title</h1>
<p><strong>Intro</strong></p>
<p>YouTube</p>
<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;">
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/E5ln4uR4TwQ?rel=0" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" width="640"></iframe>
</div>

This works great on beta.11, but not in 2.2.0. With ionic serve in the browser I see the youtube player, but I’m getting this error every second

On my iOS devices I have the same problem, on Android the YouTube player isn’t even showing.

I looked into the suggestion of @PWHSoftware (thx for that!) but in my case I don’t only include a YouTube video, but my YouTube video is part of other inserted HTML. That’s why I use bypassSecurityTrustHtml instead of bypassSecurityTrustResourceUrl.

Did someone perhaps have an idea how can I fix this?


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

That did the trick, thanks :clapper:


#10

This work for me: