Ionic 5 Capacitor嵌入YouTube视频安卓正常iOS无法使用问题

问题原因 #

你遇到的错误确实是UIWebView切换为WKWebView导致的兼容性差异：
旧版Cordova默认使用UIWebView，本地页面请求的origin为http://localhost，而Capacitor 2默认使用WKWebView，iOS端默认自定义scheme为capacitor，本地页面origin为capacitor://localhost，该origin格式不符合YouTube嵌入接口的校验规则，触发版权/嵌入限制返回错误码150。安卓端未受影响是因为安卓WebView的origin规则和旧版Cordova保持一致，不会触发YouTube的限制校验。

解决方案 #

按以下步骤修改即可解决：

• 首先修改capacitor.config.json中的iOS配置，将WKWebView的scheme调整为和旧版Cordova一致的http，hostname保持localhost：

{
  "ios": {
    "scheme": "http",
    "hostname": "localhost"
  }
}

• 修改YouTube playerVars中的origin参数值，改为对应WKWebView的实际origin：

playerVars: {
  autoplay: 0,
  rel: 0,
  controls: 0,
  color: 'white',
  enablejsapi: 1,
  showinfo: 0,
  playsinline: 1,
  origin: "http://localhost", // 替换为你实际配置的scheme+hostname
  iv_load_policy: 3
}

• 无需保留之前配置的通配符导航规则，可将server.allowNavigation精简为["*://*.youtube.com/*"]，cordova.accessOrigins直接保留默认值即可，多余的通配符配置反而会增加安全风险。
• 重新同步iOS工程并编译运行：执行npx cap sync ios后重新构建应用，YouTube视频即可正常加载。

内容的提问来源于stack exchange，提问作者Zizazorro