html5中iframe不能直接嵌入video标签，只能加载含video的独立页面或第三方embed地址；直接src指向mp4会下载而非播放；跨域下父页无法控制iframe内video，需用postmessage通信；移动端自动播放需muted、autoplay、playsinline三者兼备。
HTML5 本身不支持直接把 <video></video> 标签“嵌入”到 <iframe></iframe> 里——<iframe></iframe> 只能加载一个独立的 HTML 文档，不是容器。所谓“在 iframe 中播放视频”，实际是让 iframe 加载一个**包含 <video></video> 的独立页面**，或加载第三方视频平台（如 YouTube、Bilibili）提供的 embed 地址。
iframe src 必须指向可独立访问的 HTML 页面或合法 embed URL
直接写 <iframe src="movie.mp4"></iframe> 不会播放视频，浏览器会尝试下载文件或显示空白（取决于 MIME 类型和同源策略）。正确做法是：
- 自己准备一个
video-player.html，里面放好<video controls src="movie.mp4"></video>，再用<iframe src="video-player.html"></iframe> - 嵌入 YouTube：用官方提供的
embed链接，例如https://www.youtube.com/embed/dQw4w9WgXcQ - 嵌入 Bilibili：需开启“嵌入代码”开关，取
https://player.bilibili.com/player.html?bvid=BV1xx411c7mu这类地址 - 避免用原始 MP4 地址作
src——它不是网页，无法在 iframe 中渲染
跨域限制下 video 元素无法被父页面控制
如果 iframe 加载的是不同源的页面（比如你站嵌入 YouTube），父页面 JavaScript 无法读取或操作其内部的 <video></video> 元素（会触发 SecurityError）。这意味着：
-
document.querySelector('iframe').contentDocument报错 - 无法用 JS 播放/暂停/获取 currentTime
- 无法监听
play、timeupdate等事件 - YouTube/Bilibili 提供自己的 postMessage API（如
postMessage('{"event":"command","func":"playVideo","args":""}')），必须按其文档调用
移动端自动播放、静音与 UI 行为差异大
iFrame 内的视频在 iOS 和 Android 上受严格限制：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 要求
<video></video>同时满足：muted、autoplay、playsinline才可能自动播放；缺一不可 - 即使加了
allow="autoplay; encrypted-media; picture-in-picture"，也不能绕过用户手势触发的首次播放限制（比如点击按钮后调play()） -
playsinline属性必须出现在 iframe 的allow列表中，否则 iOS 会全屏播放 - 示例安全写法：
<iframe src="video-player.html" allow="autoplay; encrypted-media; picture-in-picture; fullscreen; microphone" allowfullscreen></iframe>
自建 video 页面嵌入时容易忽略的细节
如果你控制 iframe 内部页面（即 video-player.html 是你自己写的），要注意：
- 页面需设置
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端可能缩放异常 -
<video></video>建议设width="100%" height="auto"并包裹在<div style="max-width: 800px; margin: 0 auto;"> 中，避免拉伸变形 <li>不要在该页面里写 <code>window.parent.location或其他跨域脚本，否则 iframe 会被拒绝执行 - 若需与父页通信，用
window.parent.postMessage()+window.addEventListener('message', ...)，并校验event.origin
真正卡住人的往往不是怎么写 iframe，而是没分清「谁在控制视频」——是 iframe 自己？父页？还是第三方平台？一旦混淆来源，权限、事件、样式就全乱了。
