# 嵌入外部媒体

URL: https://caijiao.org/html/06-multimedia/03-embed
Source: docs/html/06-multimedia/03-embed.md
Description: 嵌入外部媒体如视频、音频或地图等，可以通过 标签将第三方内容直接展示在网页中，增强网页功能和内容丰富度。

在网页中，除了插入本地媒体文件，还可以通过 `<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>` 嵌入外部媒体，使网页内容更加丰富多样，增强用户互动体验。