Getting YouTube videos to play again in Ionic6

*** To get the working explanation, continue down the page ***

History:
For the longest time, it was as simple as adding a few lines of code.

$ ionic cordova plugin add cordova-plugin-youtube-video-player
$ npm install @awesome-cordova-plugins/youtube-video-player

But, back in mid 2021, this changed and since then, videos haven’t worked properly, or at all for iOS users. Sure, it worked fine on Android devices, but developers have been playing catch up after YouTube removed an API call, which basically broke things and XCDYouTubeKit hasn’t been updated recently for handling the changes.

In my logs, I was getting the error: ‘XCDYouTubeVideoErrorDomain error -3‘

An emergency hotfix has been suggested, but still not deployed for this as per here:
https://github.com/ihadeed/CordovaYoutubeVideoPlayer/pull/19

But, it was ‘markdegrootnl’ who posted the following fix:

$ cordova plugin add https://github.com/blackcupnl/CordovaYoutubeVideoPlayer.git#hotfix/get_video_info

My app took a long time to build after running this, as it had to reload/compile/clone the new cocoapod files, and it worked again.

Is it the best experience for the user? No, because it takes a long time for videos to load. But, it’s a work around for the moment, until maybe a better fix can be made.

***** Update:

While this ‘fix’ is in place, it appears that the data from Youtube runs at about 80kb/s which is not enough to make this update feasible. I’m still looking for answers on this though.

****** UPDATE: 20220525 – actual solution is still down further.

I had a bit more of a think about this and discovered the following solution:

Please see this URL for more details and context on how to solve this, and what is exactly going on, and what has been solved:
https://github.com/0xced/XCDYouTubeKit/pull/552

The Solution:
Firstly, the Podfile needs to be updated.

This is my current Podfile: ios/App/Podfile

platform :ios, '12.0'
use_frameworks!

# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
  pod 'CapacitorYoutubePlayer', :path => '../../node_modules/capacitor-youtube-player'  
  pod 'XCDYouTubeKit', :git => 'https://github.com/kbex-dev/XCDYouTubeKit.git', :branch => 'master'  
  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
  pod 'CordovaPluginsStatic', :path => '../capacitor-cordova-ios-plugins'
  pod 'CordovaPluginsResources', :path => '../capacitor-cordova-ios-plugins'
end

target 'App' do
  capacitor_pods
  # Add your Pods here
end

This is the GIT change:

- pod 'XCDYouTubeKit', :git => 'https://github.com/armendh/XCDYouTubeKit.git', :branch => 'master'
+ pod 'XCDYouTubeKit', :git => 'https://github.com/kbex-dev/XCDYouTubeKit.git', :branch => 'master'

To make sure the change happened correctly, I downloaded the MASTER code branch from here: https://github.com/kbex-dev/XCDYouTubeKit

I copied the contents of that zip file to my project: ios/App/Pods/XCDYouTubeKit/XCDYouTubeKit/

Whether or not it was important, did a clean build in XCode, built it and loaded it to 2 physical devices and it worked flawlessly.

My only problem right now is with running the following commands, that it reverts to the old PodFile.

Ionic Commands:
ionic build – no problem.

npx cap sync – reverts to the old podfile setting – breaks the fix, which can be manually adjusted.

So, while the above ‘fix’ was a real bandaid fix in the true sense, it didn’t uphold.

** The Actual Solution **

What I had to do in the end was make 2 forks of code on GitHub to make this solution work for me, so that it could be automated until other developers smarter than me can make other changes to the master code trees.

You can now use the following repository: https://github.com/vrdriver/CordovaYoutubeVideoPlayer

This can be loaded via:

cordova plugin add https://github.com/vrdriver/CordovaYoutubeVideoPlayer

The other repository I had to create was: https://github.com/vrdriver/XCDYouTubeKit. It’s not something you need to worry about, but it’s basically the Podfile engine for iOS. The current unforked version of XCDYouTubeKit is broken, and while many people have created suggestions, it hasn’t been brought in to the main trunk as yet. I found work by kbex-dev which worked, and so I had to fork it to make it integrate it in to my solution for the project to build.

I’ve tested this multiple times, and it now finally works

Other notes:

This is my list of package.json

{
  "name": "App Name",
  "version": "2.1.1",
  "author": "me",
  "homepage": "https://business.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "capacitor:sync:after": "node ./configCordovaPlugin.js"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/architect": "^0.1100.7",
    "@angular/animations": "^13.2.7",
    "@angular/common": "~13.2.7",
    "@angular/core": "^13.2.7",
    "@angular/forms": "~13.2.7",
    "@angular/platform-browser": "~13.2.7",
    "@angular/platform-browser-dynamic": "~13.2.7",
    "@angular/platform-server": "~13.2.7",
    "@angular/router": "~13.2.7",
    "@awesome-cordova-plugins/core": "^5.41.0",
    "@awesome-cordova-plugins/youtube-video-player": "^5.41.0",
    "@capacitor/android": "3.5.0",
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.5.0",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/ios": "3.5.0",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/document-viewer": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-opener": "^5.36.0",
    "@ionic-native/file-transfer": "^5.36.0",
    "@ionic-native/http": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/sqlite": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic-native/toast": "^5.36.0",
    "@ionic-native/youtube-video-player": "^5.36.0",
    "@ionic/angular": "^6.0.16",
    "@ionic/angular-server": "^6.0.16",
    "@ionic/storage": "^2.3.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "capacitor-youtube-player": "^1.0.10",
    "file-saver": "^2.0.5",
    "fsevents": "^2.3.2",
    "jetifier": "^2.0.0",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular/cli": "~13.2.3",
    "@angular/compiler": "~13.2.2",
    "@angular/compiler-cli": "~13.2.2",
    "@angular/language-service": "~13.2.2",
    "@capacitor/cli": "3.5.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.11.1",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-document-viewer": "^1.0.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-file-transfer": "git+https://github.com/apache/cordova-plugin-file-transfer.git",
    "cordova-plugin-inappbrowser": "^4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-music-controls2": "git+https://github.com/ghenry22/cordova-plugin-music-controls2.git",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.5",
    "cordova-plugin-x-toast": "^2.7.3",
    "cordova-plugin-youtube-video-player": "git+https://github.com/vrdriver/CordovaYoutubeVideoPlayer.git",
    "cordova-sqlite-storage": "^5.1.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "A great Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-file": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-file-opener2": {},
      "cordova-plugin-x-toast": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-youtube-video-player": {}
    },
    "platforms": []
  }
}

Hopefully this helps someone else who has been struggling with getting YouTube to work in Ionic apps again, ’cause up until recently, it hasn’t been working at all.

To get my own plugin working, I had to remove the original cordova plugin too:
See here for more help: https://stackoverflow.com/a/29067056/1190051

But I used the following command:

cordova plugin remove cordova-plugin-youtube-video-player  

I also had to remove the iOS and I also cleared out the Android paths, just to make sure everything flushed out correctly.

You may also find gem issues as well, such as mentioned on here: https://stackoverflow.com/questions/64698820/ignoring-ffi-1-13-1-because-its-extensions-are-not-built-try-gem-pristine-ffi

On a side note, while I did like the idea of using a native capacitor solution for playing YouTub videos, I wasn’t happy with how this project worked: https://github.com/abritopach/capacitor-youtube-player
I only say this as, it was one I played with. I couldn’t get full screen properly on iOS, and having the YT interface in the app didn’t really float my boat either.

This YT player thing may be a catch up with developers and YT, but we’ll see what happens in the future.

Enjoy! 😀

UPDATE: June 2023

Recently it’s been discovered that you need to give your app a few more permissions.

I got the following error recently when trying to play YouTube videos via this plugin:

2023-06-26 23:44:05.461 3464-3464 YouTubeAndroidPlayerAPI com.myapp.name E Can't perform resolution for YouTubeInitalizationError
android.content.ActivityNotFoundException: No Activity found to handle Intent { act=android.intent.action.VIEW dat=http://play.google.com/… flg=0x80000 pkg=com.android.vending }
at android.app.Instrumentation.checkStartActivityResult(Instrumentation.java:2087)
at android.app.Instrumentation.execStartActivity(Instrumentation.java:1747)
at android.app.Activity.startActivityForResult(Activity.java:5404)
at android.app.Activity.startActivityForResult(Activity.java:5362)
at com.google.android.youtube.player.YouTubeInitializationResult$a.onClick(Unknown Source:6)
at com.android.internal.app.AlertController$ButtonHandler.handleMessage(AlertController.java:175)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7839)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
2023-06-26 23:44:19.356 3464-3554 EGL_emulation com.myapp.name E D app_time_stats: avg=7740.00ms min=165.25ms max=15314.76ms count=2

I found my solution to this problem here.

I had to add the following code to my AndroidManifest.xml file:

<queries>    
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data  android:scheme="https" android:host="youtube.com" />
    </intent>
</queries>

After this fix, the YouTube Player worked again.