求助：使用YouTube API嵌入视频时出现“视频不可用”问题的解决方法

云上老周

2026-7-13

YouTube嵌入播放器显示"Video unavailable"问题排查与解决

我正在开发一个网页，支持用户搜索YouTube视频并自定义起止时间播放，功能基于YouTube API实现。

问题：部分视频无法正常加载播放器，反而显示错误提示："Video unavailable. Watch on YouTube"，但这些视频在YouTube官网能正常播放。

我排查后得知可能的原因包括：

视频ID包含非字母数字字符
视频包含授权内容（licensed content）
网站在本地环境运行
源策略（origin-policy）不够严格

已尝试的解决措施：
以视频ID 3G6aOZvNoCo 为例，该ID为纯字母数字，无授权内容和区域限制，但仍无法嵌入。我已将网站部署到AWS EC2实例，配置了HTTPS证书，同时强化了内容策略（content-policy），但问题依旧存在。

以下是我的JS代码：

// Get DOM elements
const startBtn = document.getElementById('start-btn');
const startField = document.getElementById('start-field');
const endBtn = document.getElementById('end-btn');
const endField = document.getElementById('end-field');
const resetBtn = document.getElementById('reset-btn');
const shorticBtn = document.getElementById('shortic-btn');
const urlParams = new URLSearchParams(window.location.search);
const uri = urlParams.get('uri');

// Declare variables
let player;
let songName;
let artist;
let startTime = 0;
let endTime = 0;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//when player is ready
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player-div', {
        height: '360',
        width: '640',
        videoId: uri,
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
    const duration = player.getDuration();
    endField.value=endTime=duration;
    // Start button click
    startBtn.addEventListener('click', () => {
        let tmp = player.getCurrentTime();
        if(tmp<=endTime) startField.value = startTime=tmp;
    });
    // End button click
    endBtn.addEventListener('click', () => {
        let tmp = player.getCurrentTime();
        if(tmp>=startTime) endField.value = endTime=tmp;
    });
    // Start field change
    startField.addEventListener('change', () => {
        let tmp = startField.value;
        if(tmp<=endTime) startTime=tmp;
    });
    // End field change
    endField.addEventListener('change', () => {
        let tmp = endField.value;
        if(tmp>=startTime) endTime=tmp;
    });
    // Reset button click
    resetBtn.addEventListener('click', () => {
        startTime = 0;
        startField.value = startTime;
        endTime = duration;
        endField.value = endTime;
    });
    // Shortic button click
    shorticBtn.addEventListener('click', () => {
        const shorticURL = `lastSteps.html?uri=${uri}&starttime=${startTime}&endtime=${endTime}&name=${songName}&artist=${artist}`;
        window.location.href = shorticURL;
    });

    const iddle= () => {
        let currentPos = player.getCurrentTime();
        if(currentPos>=endTime || currentPos<startTime) player.seekTo(startTime);
    }
    setInterval(iddle,200);
}

可能的解决方向

1. 检查视频嵌入权限

即使视频无区域限制，部分创作者可能设置了禁止嵌入的权限。你可以通过YouTube Data API的videos.list接口，传入id=3G6aOZvNoCo和part=status参数，查看status.embeddable字段是否为true。如果是false，说明该视频不允许嵌入，只能引导用户跳转至YouTube官网观看。

2. 完善播放器配置参数

你的播放器初始化代码缺少一些关键配置，建议添加playerVars参数并补充错误监听：

player = new YT.Player('player-div', {
    height: '360',
    width: '640',
    videoId: uri,
    playerVars: {
        'enablejsapi': 1,
        'origin': window.location.origin, // 显式指定源地址
        'rel': 0,
        'fs': 1
    },
    events: {
        'onReady': onPlayerReady,
        'onError': onPlayerError // 添加错误监听
    }
});

// 错误监听函数，获取具体错误码
function onPlayerError(event) {
    console.log('播放器错误码:', event.data);
    // 错误码对应含义：
    // 2: 请求参数无效
    // 5: HTML5播放器无法加载视频
    // 100: 视频不存在或已被删除
    // 101/150: 视频不允许嵌入
}

通过错误码可以精准定位问题，比如101/150就明确是嵌入权限限制。

3. 验证内容安全策略（CSP）

确保CSP允许加载YouTube相关资源：

script-src需包含https://www.youtube.com和https://www.youtube-nocookie.com
frame-src需包含https://www.youtube.com和https://www.youtube-nocookie.com
img-src需包含https://*.ytimg.com

示例CSP配置：

Content-Security-Policy: script-src 'self' https://www.youtube.com; frame-src https://www.youtube.com https://www.youtube-nocookie.com; img-src 'self' https://*.ytimg.com;

4. 使用无Cookie域名嵌入

部分视频可能因Cookie限制无法嵌入，尝试切换到无Cookie域名：

// 修改API加载地址
tag.src = "https://www.youtube-nocookie.com/iframe_api";
// 播放器配置中添加host参数
playerVars: {
    'host': 'https://www.youtube-nocookie.com'
}

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