Ionic 5 Capacitor Youtube embedded video works on Android, but unavailable on iOS

Capacitor
1

Hi,

Since using Capacitor instead of Cordova, some video’s that are embedded via the onYoutubeIFrameApiReady player will return unavailable on iOS. I get the error 150 (so restricted by YouTube), but the weird thing is that those video’s work on the Android version of the app, and also worked on our previous app, when we used Cordova.

An example youtube id that works on Android, but doesn’t on iOS is “VbjuEs70E3E”.

I’m currently stuck for a couple of weeks, but the things I already tried are:

  • Settings enablejsapi to 1 and adding an origin https://www.youtube.com to the playerVars.
  • Adding ["*", "*://*.youtube.com/*] to server.allowNavigation
  • Adding ["*", "*://*.youtube.com/*] to cordova.accessOrigins
  • Adding NSAllowsArbitraryLoads etc to info.plist (see below)
   <key>NSAppTransportSecurity</key>
   <dict>
   	<key>NSAllowsArbitraryLoads</key>
   	<true/>
       <key>NSAllowsArbitraryLoadsForMedia</key>
   	<true/>
       <key>NSAllowsArbitraryLoadsInWebContent</key>
   	<true/>
   </dict>

This is the code to call the Youtube API

(<any>window).onYouTubeIframeAPIReady = () => {
      this.player = new (<any>window).YT.Player('ytplayer', {
        playerVars: {
          autoplay: 0,
          rel: 0,
          controls: 0,
          color: 'white',
          enablejsapi: 1,
          showinfo: 0,
          playsinline: 1,
          origin: "https://www.youtube.com",
          iv_load_policy: 3
        },
        events: {
          'onReady': () => {
            this.initializePlayer();
          },
          'onStateChange': (e: any) => {
            this.onPlayerStateChange(e);
          },
          'onError': (e: any) => {
            this.showError(e);
          }
        }
      });
    };

I’m using

  • Capacitor 2
  • Ionic 5
  • Angular 9

Is it possible that it behaves differently because of Apple’s transition from UIWebView to WKWebView?

2

Hi did you find a solution for this issue?

3

Not a direct solution, but I use the package Plyr without any issues.

4

I appreciate you replying. Does this plugin work on iOS?

5

Yes, it works on both Android and iOS. We are using it for YouTube and Vimeo videos along with audio files.

I believe the only caveat with using an HTML player is that you don’t get a native OS notification with video/audio controls (at least not on Android, you possibly do on iOS).

6

thank you !!!