Youtube iframe API origin参数编码异常致onReady回调仅触发一次问题

• 针对API自动拼接的origin参数为URI编码格式问题
  放弃API自动注入iframe的逻辑，改为手动构造iframe元素，src属性中origin参数直接使用未编码的明文格式，完成DOM插入后再绑定YT.Player实例，从根源避免编码格式不一致的问题。
• 针对playerVars中origin配置不生效问题
  origin属于API顶层配置项，不支持放在playerVars对象内传递，初始化时直接在配置对象的第一层写入origin参数即可，示例代码：

  // 正确写法
  const player = new YT.Player('your-player-id', {
    videoId: 'your-video-id',
    origin: window.location.origin, // 顶层配置
    events: {
      'onReady': onPlayerReady
    }
  })
  
  // 错误写法
  const player = new YT.Player('your-player-id', {
    videoId: 'your-video-id',
    playerVars: {
      origin: window.location.origin // 该写法不生效
    }
  })
  

• 针对同页面多个YT.Player实例仅触发一次onReady回调问题
  确保所有关联iframe的src中origin参数格式完全统一，不要混合使用编码和未编码两种格式；多个实例按DOM插入顺序依次初始化，避免并行初始化导致的API内部消息监听冲突。

origin参数是HTML5 postMessage功能的必要校验字段，格式不统一会导致API将不同格式origin的iframe识别为不同来源的实例，进而出现回调丢失、配置不生效等异常。

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