如何在Web App中嵌入带access token的私有YouTube视频？

算力阿峰

2026-7-27

私有YouTube视频嵌入的解决思路

改用YouTube Data API生成合规的嵌入代码
别直接在embed URL后拼接access_token，调用YouTube Data API的videos.list接口，传入视频ID和你的access_token，指定part=player参数。接口返回的player.embedHtml字段里的iframe代码已经包含了正确的权限验证逻辑，直接把这段HTML嵌入到你的Web App里就能正常播放。
示例伪代码：
```
fetch('https://www.googleapis.com/youtube/v3/videos?id=<video_id>&part=player&access_token=<access_token>')
  .then(res => res.json())
  .then(data => {
    document.getElementById('video-wrap').innerHTML = data.items[0].player.embedHtml;
  });
```
检查access_token的权限范围
确保你的access_token申请时包含了https://www.googleapis.com/auth/youtube.readonly或https://www.googleapis.com/auth/youtube权限，没有对应权限的话，embed模式下的权限验证会失败。

通过postMessage给播放器传递token
先加载基础的embed iframe，再用postMessage向播放器发送验证信息：

嵌入基础iframe：

<iframe id="yt-player" src="https://www.youtube.com/embed/<video_id>" frameborder="0"></iframe>

添加脚本传递token：

const playerFrame = document.getElementById('yt-player');
playerFrame.contentWindow.postMessage({
  event: 'command',
  func: 'setAccessToken',
  args: ['<access_token>']
}, 'https://www.youtube.com');

注意要严格指定postMessage的目标源，避免安全风险。

直接用YouTube后台的嵌入授权功能
作为视频所有者，可在YouTube Studio里给该私有视频设置允许嵌入的域名，后台会生成专属的嵌入代码，无需额外携带access_token，只要你的Web App域名在授权列表内就能正常播放。路径：YouTube Studio → 目标视频 → 权限 → 嵌入选项 → 添加允许的域名 → 复制嵌入代码。