allowfullscreen是布尔属性，仅声明iframe内容可调用requestFullscreen()；现代浏览器还需allow="fullscreen"，否则静默失败，且需兼顾webkitallowfullscreen、mozallowfullscreen兼容旧版。

allowfullscreen 是 iframe 的布尔属性，但它本身不“开启”全屏功能——它只是告诉浏览器：“这个 iframe 里的内容被允许调用 requestFullscreen()”。没有它，嵌入的视频（比如 YouTube、Bilibili）点全屏按钮会直接失效。

为什么加了 allowfullscreen 还不能全屏？

常见错误是只写 allowfullscreen，但漏掉现代浏览器要求的权限升级机制：

• Chrome 71+、Edge 79+、Safari 13.1+ 要求同时声明 allow="fullscreen"
• 仅 allowfullscreen 在新版本中会被忽略（尤其 iOS Safari 和桌面 Safari）
• 部分平台（如微信内置浏览器）还额外要求 webkitallowfullscreen 和 mozallowfullscreen 兼容写法

正确写法：兼容所有主流环境

实际部署时建议这样写（一行内，无换行）：

<iframe
  src="https://www.youtube.com/embed/xxx"
  allowfullscreen
  allow="fullscreen"
  webkitallowfullscreen
  mozallowfullscreen
></iframe>

说明：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

• allowfullscreen 是 HTML5 标准属性，基础支持
• allow="fullscreen" 是 Permissions Policy（原 Feature Policy）语法，必须显式声明，否则现代浏览器拒绝授权
• webkitallowfullscreen/mozallowfullscreen 对旧版 Safari/Firefox 有兜底作用，不加也不报错，但加了更稳

嵌入 Bilibili 或自建视频页时的特殊注意点

Bilibili 官方 embed 地址默认已带 allowfullscreen，但如果你用的是 iframe 自定义 src（比如跳过 B 站首页跳转），需手动补全；自建视频页若用了 video + requestFullscreen()，则 iframe 外层必须满足上述全部条件，否则 JS 调用会抛出 SecurityError: Document not allowed to call requestFullscreen()

• 检查控制台是否出现该错误信息 —— 是最直接的判断依据
• 确保 iframe 的 src 是 HTTPS 协议（HTTP 页面中嵌 HTTPS iframe 通常仍可全屏，但反之不行）
• 不要把 allowfullscreen 写成 allowfullscreen="true"，它是布尔属性，有即生效

最容易被忽略的是 allow="fullscreen" 这一行——它不像 class 那样“写了就有效”，而是浏览器强制执行的权限白名单。少它，哪怕其他都对，全屏按钮也静默失败。