iframe嵌入画中画需满足三重条件：父页面iframe标签必须显式声明allow="picture-in-picture"；子页面video须带playsinline和webkit-playsinline属性且由用户手势触发；跨域时须通过postMessage通信并校验origin。
iframe 必须显式声明 allow="picture-in-picture"
嵌入的 iframe 默认无权调用画中画 API，哪怕子页面里 video.requestPictureInPicture() 写得再规范也会静默失败。关键一步是父页面的 iframe 标签必须带上这个布尔属性：allow="picture-in-picture"。
常见错误：只在子页面加 video 属性、或写成 allow="true"、allow="picture-in-picture *"，这些都不生效。
- 正确写法：
<iframe src="player.html" allow="picture-in-picture"></iframe> - 若还用到自动播放或全屏，建议合并权限：
allow="picture-in-picture; autoplay; fullscreen" - 多层嵌套 iframe 时，每一层都得加，缺一层就断掉
子页面 video 必须由用户手势触发且已就绪
子页面内部的 video 元素不能在 loadedmetadata 或 autoplay 后自动调用 requestPictureInPicture()，否则报 NotAllowedError: Document not allowed to use Picture-in-Picture mode。
必须满足两个硬条件：
立即学习“前端免费学习笔记（深入）”；
-
video.readyState >= HTMLMediaElement.HAVE_METADATA（至少元信息加载完成） - 调用必须绑定在
click或touchend这类明确的用户事件回调中，不能靠setTimeout延迟“模拟”手势 - iOS Safari 对
touchend更敏感，若事件被preventDefault()干扰，也可能失败
跨域 iframe 下无法直接控制 video，需用 postMessage
如果 iframe 是跨域的（比如嵌入 YouTube），父页面 JavaScript 无法访问其内部 video 元素，document.querySelector('iframe').contentDocument 会抛 SecurityError。
此时不能自己调 requestPictureInPicture()，而要依赖第三方平台提供的通信机制：
- YouTube 支持
postMessage发送{"event":"command","func":"enterPictureInPicture","args":""} - Bilibili 的 player 需开启“嵌入代码”开关，并查阅其文档确认是否暴露 PiP 控制接口
- 自建跨域子页面时，需在子页面监听
message事件，校验event.origin后再执行video.requestPictureInPicture()
移动端 iOS Safari 要额外加 playsinline 和 webkit-playsinline
iOS Safari 对 iframe 内视频的画中画限制最严：即使 allow="picture-in-picture" 和手势都到位，若 video 没同时带 playsinline 和 webkit-playsinline 属性，仍可能强制全屏、拒绝 PiP。
子页面的 video 标签应这样写：
<video controls playsinline webkit-playsinline> <source src="video.mp4" type="video/mp4"> </video>
漏掉 webkit-playsinline 是 iOS 上 PiP 失效的高频原因，且该属性不支持通过 JS 动态添加，必须写在 HTML 源码里。
真正卡住的地方往往不是 API 调用本身，而是权限链断在某一层——iframe 缺 allow、子页面 video 少 webkit-playsinline、跨域时忘了 postMessage 校验 origin，三者任一缺失都会让 PiP 完全不可用。
