YouTube logo link is taking over the app

Wanted to consult with others who are using the YouTube player as an iFrame in their apps.

Basically everything works fine. but my app got rejected by Apple because my app is considered “for kids” - and kids shouldn’t be redirected to other places w/o what Apple call “parental gateway”

“Parental gateway”: is capturing the “stepping out of the app before loading YouTube” event - show some “allow page” that only adults can understand, and if you click “yes” or answer some question - you are forwarded to YouTube.

App behavior: so current state, you’re loading my app, it has many YouTube videos, then you click on one of them.
After the click loads the video in an iFrame ( embed ) - there’s a small YouTube logo on the player/video itself.
When you click it - basically you’re not being forwarded to YouTube’s app ( like Ionic native YouTube does ) - it basically “taking over” my entire app, and then I have two problems:

  1. you can’t go back to my App, only if you click “Home” button twice - remove my app, and reload my app
  2. How can I capture that event - so I can implement the “Parental Gateway” that Apple wants

Any thoughts ?

I would load the video thubmnails per youtube api in my app, no iframe required.
Then when a user clicks on one thubmnail he is redicted to youtube via https://ionicframework.com/docs/native/youtube-video-player/.

And between the click and the plugin call you can show a one time question page where you have to confirm your age or sth like that.

The thumbnails is not the problem, the video player is the problem.
the native youtube player by Ionic show videos outside the app, right ? I can’t leave the app, it’s for 2 year-old kids … they won’t know how to go back …

This is the app in Android may it will give a little bit context:


https://developers.google.com/youtube/player_parameters
options that you may want to use:

autoplay: 1
modestbranding: 1
rel: 0

Thanks for the suggestion, so if I’m debugging these parameters with the link:
[https://www.youtube.com/embed/vN-96ej5SgQ?modestbranding=1&showinfo=1&rel=0&playsinline=1]

I see that modestbranding=1 must go together with showinfo=1
if showinfo will be 0 - the YouTube Logo will appear instead ( you can reproduce with the above link )
The rel=0 I’m not sure, doesn’t have any affect.

The Issue I have with showinfo=1 is that you can click its title - and it will also forward you to YouTube
So it’s either the logo that will forward you to YouTube or the title :smile:

rel=0 is for showing NO suggestions at the end.
There is also a js api for controlling the embedded player - have you checked that out?

maybe you could create a custom yt player like this one https://www.reembed.com/ (this one is proprietary ) or customize this one from github https://github.com/sampotts/plyr

WOW - didn’t know that ! thank you, will check that out ! it looks great !

Any idea in plyr how I set this up with Ionic ? the player doesn’t really support TS

no, not realy but I’m sure If you tinker around enough you will come up with a solution :wink:

Those type definitions look fine.

as a file yes, but what I need to do in order to use it in Ionic ? it doesn’t seems to be working the same as Angular2 “namespaces” examples … :confused:

If you/someone can edit this stackblitz - that would be a great help: https://stackblitz.com/edit/ionic-6nlzzm
( ignore all the other tabs, just look a pages/home/ and home.ts )

here you are: https://stackblitz.com/edit/ionic-tycgev?file=pages/home/home.html
Just tinker around a liitle bit like I said.

1 Like

Wow !! thank you very much !!!

Tried … plyr didn’t work. and basically these solutions still embed the player and blocking any functionality of it - will cause a violation of the YouTube’s terms and service.

But bottom line, I’m receiving error from iPad ( everywhere else it works )


Unable to post message to https://www.youtube.com. Recipient has origin http://x.x.x.x:8101.

I wonder,
What’s the container I’m using ? there are so many names out-there “inappbrowser” / webview / UIwebview WKwebview etc … etc …
I’m trying to understand what I’m using - so maybe that container has its own events - that maybe I can listen to … ?

cli packages: (/Users/arlevi/.npm-packages/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.8
    Node       : v7.2.0
    npm        : 4.0.5
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

Cordova plugins

> cordova plugin ls
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-youtube-video-player 1.0.6 "CordovaYoutubeVideoPlayer"
ionic-plugin-keyboard 2.2.1 "Keyboard"