嵌入外部媒体

在网页中，除了插入本地媒体文件，还可以通过 <iframe> 标签嵌入来自外部网站的内容，如视频、音频、地图等，实现丰富的多媒体体验。

基本用法

html

<iframe
  src="外部内容链接"
  width="宽度"
  height="高度"
  frameborder="0"
  allowfullscreen
></iframe>

src：嵌入内容的网址。
width 和 height：设置 iframe 大小。
frameborder：边框，0 表示无边框。
allowfullscreen：允许全屏显示（多用于视频）。

示例：嵌入 YouTube 视频

html

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  allowfullscreen
>
</iframe>

示例：嵌入 Google 地图

html

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
>
</iframe>

注意事项

部分网站可能设置了防止嵌入的安全策略（如 X-Frame-Options），导致无法正常显示。
嵌入内容的尺寸应合理设置，避免影响页面布局。
通过 loading="lazy" 属性可以延迟加载，提高页面性能。

使用 <iframe> 嵌入外部媒体，使网页内容更加丰富多样，增强用户互动体验。