如何使用Puppeteer将YouTube视频切换为全屏模式？

失效原因 #

你之前的方案无法生效，核心是三个常见限制：

• Puppeteer默认启动的Chromium要求真实用户交互才能触发全屏API，同时默认未授予页面全屏权限
• 未等待播放器元素完全加载可交互就执行操作，导致事件未命中目标
• 模拟按键时焦点没有落在视频播放器组件上，按键事件无法被捕获

可行实现方案 #

第一步：调整浏览器启动配置，放开全屏相关限制

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    // 旧版无头模式不支持全屏特性，v19+版本可填'new'开启新版无头，测试阶段建议先关无头
    headless: false,
    args: [
      '--start-maximized',
      '--enable-fullscreen',
      // 绕过「需用户真实交互才能触发全屏」的浏览器限制
      '--no-user-gesture-required'
    ]
  });
  const page = await browser.newPage();

  // 提前给页面授予全屏权限
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator.permissions, 'query', {
      value: (param) => param.name === 'fullscreen' 
        ? Promise.resolve({ state: 'granted' }) 
        : navigator.permissions.query(param)
    });
  });

第二步：导航到视频页后执行全屏操作

await page.goto('你的YouTube视频链接', { waitUntil: 'networkidle2' });

  // 等待播放器组件完全加载可见
  await page.waitForSelector('#movie_player', { visible: true, timeout: 15000 });

  // 方案1：直接调用原生全屏API，稳定性最高，无需模拟交互
  await page.evaluate(() => {
    const player = document.getElementById('movie_player');
    if (player?.requestFullscreen) {
      player.requestFullscreen();
    }
  });

  /* 方案2：模拟按键触发（如果需要贴近真实用户操作可选）
  await page.focus('#movie_player');
  await page.keyboard.press('f');
  */
})();

注意事项 #

• 如果操作的是嵌入第三方页面的YouTube iframe，需要先通过page.frames()切入iframe上下文后再执行上述操作，不能直接在顶层页面上下文操作
• 窗口最小化的场景下部分系统会拦截全屏请求，运行脚本时不要手动最小化浏览器窗口
• 如果需要退出全屏，调用document.exitFullscreen()或者再次按f键即可

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