如何基于react-youtube实现YouTube iframe视频同步至同域弹窗并解决跨域问题？

• 应用场景：主Web端通过react-youtube组件（基于YouTube官方iframe嵌入能力）渲染视频播放器，启动时通过window.open()打开同源弹窗窗口，两个窗口无跨域通信限制，可直接操作弹窗DOM
• 目标：将主窗口内的YouTube播放内容同步到弹窗中的独立原生<video>元素，实现播放、暂停、进度跳转、清晰度切换等全操作的无偏差同步
• 已验证不可行的路径：
  • 用Canvas绘制视频流实现克隆：受跨域安全策略限制，抓取视频帧时会被拦截
  • 直接读取YouTube iframe内部的DOM节点拿原生video元素：触发跨域安全拦截，控制台抛出SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame
  • 在弹窗里再嵌一个同款YouTube播放器做事件同步：不符合“用独立原生video元素承载播放内容”的需求预期

• 方案一：基于YouTube iframe公开API做状态同步（无需额外服务端开发，改造成本最低）
  1. 给主窗口里的YouTube播放器实例绑全所有公开的状态监听事件：播放/暂停状态、实时播放进度、播放倍速、音量、缓冲进度、当前清晰度
  2. 因为两个窗口同源，直接把监听到的实时状态同步到弹窗里的原生<video>元素：
     • 收到播放/暂停指令就直接调用video元素的play()/pause()方法
     • 进度值带100ms以内的防抖同步，直接设置video元素的currentTime，视觉上和主播放器的进度偏差人眼几乎感知不到
     • 清晰度切换不需要额外写逻辑：同一个视频源的原生video会自动根据网络状况匹配最高清晰度，和主播放器的表现一致
  3. 额外补个小逻辑：主播放器触发seek操作的时候，给弹窗的video元素加个临时的loading状态，避免进度同步的时候出现跳帧卡顿
• 方案二：走服务端代理拉流实现原生播放（能做到毫秒级的播放对齐）
  1. 主窗口拿到当前播放视频的原始媒体地址，通过自有服务做转发代理，绕开YouTube的防盗链、跨域限制
  2. 弹窗里的video元素直接加载代理后的媒体流地址，再复用上面的状态同步逻辑对齐所有操作，全程不需要碰YouTube iframe的内部DOM

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