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

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?

Hi @chanphillip did you ever get this to work?

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…

1 Like

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.

I use the official YouTube iframe API library

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.

1 Like

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?

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

That did the trick, thanks :clapper:

1 Like

This work for me:

Hi, did you found the solution ? i am looking for the same

Unfortunately I cannot help you. I solved it at the time, but it was so long ago. I don’t know how anymore.

1 Like