使用<iframe>嵌入第三方地图或视频需获取其官方提供的嵌入代码，确认来源支持iframe接入，适配宽高与响应式布局，并注意HTTPS、API授权及XSS防护等安全合规要求。
用 <iframe> 嵌入第三方地图或视频，核心是获取对方提供的嵌入代码（通常含 <iframe>），再稍作适配即可直接使用，不需要额外开发。
确认来源是否支持 iframe 嵌入
不是所有服务都开放 iframe 接入。常见支持的有：
- Google 地图：在地图界面点「分享」→「嵌入地图」，复制生成的
<iframe>代码 - 百度地图：进入「地图开放平台」→「静态图服务」或「JS SDK 示例页」可获取嵌入链接（注意：新版百度地图网页版已不直接提供 iframe，需用其 JS API 或调用静态图）
- YouTube 视频：打开视频页 → 点「分享」→「嵌入」→ 复制代码
- Bilibili 视频：播放页右下角「分享」→「嵌入代码」→ 复制
如果找不到“嵌入”选项，说明该内容可能禁用了 iframe 加载（比如某些受版权保护的视频），此时无法直接嵌入。
基础 iframe 写法与关键属性
一个典型 YouTube 嵌入示例：
立即学习“前端免费学习笔记（深入）”；
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>重点参数说明：
- src：必须是对方明确提供的嵌入地址（不是视频主页 URL）
- width / height：建议设为具体数值或用 CSS 控制；若设为百分比，需确保父容器有宽度
- allowfullscreen：启用全屏按钮（视频类必需）
-
allow：声明所需权限（如
autoplay、clipboard-write），部分功能（如自动播放）依赖此字段 - title：提升可访问性，屏幕阅读器会读出该文字
响应式适配（让 iframe 在手机上也好看）
固定宽高在小屏上容易溢出。推荐用 CSS 实现等比缩放：
- 给
<iframe>包一层<div class="responsive-iframe"> - 用 CSS 设置
padding-top: 56.25%（16:9 比例）并配合position: absolute定位 iframe - 或者更简单：用现代 CSS，如
aspect-ratio: 16 / 9+width: 100%（兼容 Chrome 88+、Firefox 89+、Safari 15.4+）
安全与合规注意事项
嵌入第三方内容涉及跨域和隐私问题，需留意：
- 确保网站使用 HTTPS，否则多数现代浏览器会拦截 HTTP 来源的 iframe（尤其地图/视频）
- 部分平台（如 Google Maps）要求页面有合法的 API Key 或符合其 服务条款
- 国内项目嵌入 Google 服务需考虑网络可达性；可优先选百度、高德、腾讯地图等本地化方案
- 避免在 iframe 的
src中拼接用户输入的内容，防止 XSS
