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