如何启用嵌套iframe中内嵌视频的全屏模式？

当然可以实现，但必须确保所有嵌套层级的iframe都正确配置全屏权限，只给最内层视频所在的iframe加权限是不够的。

问题原因 #

你示例里的video2无法全屏，核心是中间的父级iframe（comments）的权限配置没有正确传递给子iframe，导致最内层的视频无法获取全屏权限。

解决步骤 #

1. 所有层级iframe添加allowfullscreen属性：每一层嵌套的iframe都需要设置这个HTML属性，这是浏览器允许元素进入全屏的基础要求。
2. 父级iframe配置权限策略：在包含子iframe的父级iframe中，通过allow属性明确指定fullscreen权限，确保子资源可以请求全屏功能。

修正后的代码示例 #

...
<body>
...
  <iframe id="video1" src="..." allowfullscreen></iframe> <!-- 全屏模式可用 -->
  <iframe id="comments" src="..." allow="fullscreen" allowfullscreen>
    #document
    ...
    <iframe id="video2" src="..." allowfullscreen></iframe> <!-- 现在全屏模式可用 -->
  </iframe>
...
</body>
...

额外说明 #

• 如果是跨域嵌套的iframe，除了前端配置上述属性，还要确保父级iframe的服务器没有通过响应头限制全屏权限，不过大多数情况下，前端配置正确就能生效。
• 部分现代浏览器中，allowfullscreen可以被allow="fullscreen"替代，但为了兼容性，建议两者同时配置。

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