angular youTube-player library with ionic do not work on IOS

Question

I did try to use the angular youTube player library in ionic 5. It did work like expected on Android, but do not show on ios.

Does somebody had the same problem and know how to fix it?

This is my code

// component.html
<youtube-player [videoId]="attributes?.youTubeLink" width="100%" height="auto"></youtube-player>

// module.ts
import { YouTubePlayerModule } from '@angular/youtube-player'

imports [
    CommonModule,
    IonicModule,
    YouTubePlayerModule,
]

// component.ts

export class YouTubeComponent implements OnInit {
  ngOnInit(): void {
    loadScript('https://www.youtube.com/iframe_api')
  }
}

// utilities.ts 
export const loadScript = (target: string): void => {
  if (!isScriptLoaded(target)) {
    const tag = document.createElement('script')
    tag.src = target
    document.body.appendChild(tag)
  }
}

const isScriptLoaded = (target: string): boolean => {
  return document.querySelector('script[src="' + target + '"]') ? true : false
}

Answer 1

I needed to add the following to the config.xml file.

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

Answer 2

I'd suggest you have a look at this link. It's been going on for a while now unfortunately. https://github.com/ihadeed/CordovaYoutubeVideoPlayer/pull/19#issuecomment-1071026897

You can add this PR in your project using

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