html iframe无法自动适配高度，但可通过css宽高比容器（padding-top+绝对定位）、viewport设置、媒体查询及同源javascript动态同步高度实现响应式效果；跨域场景应优先选用embed或官方嵌入代码。
HTML内联框架（<iframe></iframe>）本身不支持自动适配内容高度，但通过合理搭配CSS和少量JavaScript，可以实现接近“自适应高度”的响应式效果。关键不是让iframe自己伸缩，而是控制其容器、利用比例占位、配合内容加载后的动态调整。
用宽高比容器包裹 iframe
这是最稳定、纯CSS可实现的方式。核心是用 padding-top 百分比制造固有宽高比，再用绝对定位让 iframe 填满该区域：
- 给 iframe 外层加一个
div.iframe-container - 设置容器为相对定位，宽100%，高0，
padding-top: 56.25%（对应16:9）或75%（4:3） - iframe 设为绝对定位，
top: 0; left: 0; width: 100%; height: 100%，并移除默认边框和滚动条
这样容器始终维持比例，iframe 在不同屏幕下等比缩放，视觉上就是“自适应高度”。
配合 viewport 和媒体查询优化显示
仅靠比例还不够，需确保 iframe 内容本身也响应式：
- 在 iframe 的
中必须包含：<meta name="viewport" content="width=device-width, initial-scale=1"> - 如果嵌入的是你可控的页面（如自己写的嵌入页），内部也要用流体单位（
%、rem、vw）和媒体查询 - 主页面可用媒体查询微调容器 padding-top，比如小屏改用
padding-top: 100%（1:1）适配竖屏短视频
用 JavaScript 动态同步高度（仅限同源）
当 iframe 页面与主站同域时，可通过 postMessage + 定时检测实现真实高度同步：
- iframe 页面加载完成后，向父窗口发送自身
document.body.scrollHeight - 父页面监听 message，拿到高度后设置 iframe 的
style.height = height + 'px' - 为防内容动态变化（如展开折叠），可加 MutationObserver 或定时轮询
注意：跨域 iframe 无法读取其 DOM，此法不可用；且现代浏览器对频繁 resize 有性能限制，建议只在必要时启用。
替代方案：优先考虑 embed 或现代 API
对于视频类内容，<video></video> 或 <embed></embed> 更轻量且原生支持响应式；若嵌入第三方服务（如 YouTube、Bilibili），直接使用其官方响应式嵌入代码——它们已内置 viewport 和 JS 高度适配逻辑，比手写 iframe 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
