响应式 iframe（YouTube、Google 地图等）

响应式 iframe（YouTube、Google 地图等）: 用途

YouTube 和 Google 地图的嵌入代码带有固定的宽度和高度，会超出手机屏幕。粘贴 iframe 或只粘贴网址，即可得到占满 100% 宽度并用 aspect-ratio 保持比例的版本。

工具能识别 YouTube（包括 9:16 的 Shorts）、Google 地图、Vimeo、Spotify、Instagram、Canva 和 Google 表单，建议合适的比例或高度，添加 loading=lazy、供屏幕阅读器使用的 title 和全屏功能，并显示可以缩窄的预览，让你查看在手机上的效果。

使用方法

1. 粘贴 iframe 或网址。
2. 检查比例和 title。
3. 把代码复制到网站中。

使用场景

• 首页上的 YouTube 视频。
• 联系页面上的 Google 地图。
• 嵌入 Spotify 播放器或表单。

常见问题

为什么 iframe 在手机上会溢出？

嵌入代码带有固定的 width 和 height，例如 560 × 315。在宽度为 360 px 的手机上，视频会比屏幕还大。这里生成的代码使用 100% 的宽度和 aspect-ratio 属性，在任何屏幕上都能保持比例。

loading=lazy 有什么用？

浏览器只在 iframe 快要出现在屏幕上时才加载它。视频和地图体积较大，当它们位于页面下方时，这能让页面加载快很多。

iframe 中的 title 有什么用？

屏幕阅读器会朗读 title，告诉用户 iframe 里是什么，例如“视频：如何到达门店”。没有它，用户只会听到“框架”，不知道里面是什么。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具