如何通过YT.Player API隐藏嵌入YouTube视频的初始弹出注释？

1. 强制通过API在视频就绪后重置注释参数 #

你已经在playerVars里配置了iv_load_policy: 3，但受YouTube iframe加载时序影响，这个参数可能没在初始渲染阶段完全生效。可以在onReady回调中再次通过API强制设置注释隐藏：

修改onReady函数：

onReady: function (e) {
    e.target.mute();
    e.target.setPlaybackQuality('hd1080');
    // 强制重置注释隐藏参数
    e.target.setOption('iv_load_policy', 3);
    // 延迟100ms播放，确保参数完全生效
    setTimeout(() => {
        e.target.playVideo();
    }, 100);
},

2. 调整自动播放时机，避免提前加载 #

把playerVars中的autoplay设为0，防止视频在参数未初始化完成时就开始播放，待所有配置生效后再启动播放：

修改playerVars配置：

playerVars: {
    autoplay: 0, // 先关闭自动播放
    disablekb: 1,
    controls: 0,
    showinfo: 0,
    modestbranding: 1,
    loop: 1,
    fs: 0,
    autohide: 0,
    rel: 0,
    enablejsapi: 1,
    iv_load_policy: 3
},

然后更新onReady回调：

onReady: function (e) {
    e.target.mute();
    e.target.setPlaybackQuality('hd1080');
    e.target.setOption('iv_load_policy', 3);
    // 完成配置后启动播放
    e.target.playVideo();
},

3. 跨域场景下的CSS强制隐藏（备用方案） #

由于iframe跨域限制，常规CSS无法直接修改内部元素，但可以尝试通过以下方式强制隐藏注释元素（注：此方法依赖YouTube的DOM结构，可能随平台更新失效）：

添加CSS样式：

#yt-bg-player iframe {
    overflow: hidden !important;
}
/* 针对YouTube注释元素的类名 */
#yt-bg-player iframe .ytp-annotation,
#yt-bg-player iframe .annotation {
    display: none !important;
}

如果上述CSS无效，可尝试在onReady中动态注入样式到iframe（需确保跨域策略允许）：

// 在onReady回调末尾添加
const iframe = document.getElementById('yt-bg-player').querySelector('iframe');
if (iframe?.contentDocument) {
    const style = document.createElement('style');
    style.textContent = '.ytp-annotation, .annotation { display: none !important; }';
    iframe.contentDocument.head.appendChild(style);
}

4. 检查视频本身的注释配置 #

登录YouTube后台，查看你嵌入的视频是否有手动添加的内嵌注释。部分视频自带的注释需要在视频编辑页面手动删除，才能彻底避免显示。

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