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?