在 HTML 中嵌入 YouTube 视频

介绍

HTML <embed> 标签可用于将各种类型的内容（如图片、视频和其他网页）嵌入到我们的网页中。在本实验中，我们将使用 HTML <embed> 标签将 YouTube 视频添加到网页中。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

HTML 文档结构

创建一个名为 index.html 的新文件。

创建 index.html 文件后，添加包含 head 和 body 元素的基本 HTML 文档结构。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

使用 HTML 标签添加视频

要在网页中添加视频，你需要使用 YouTube 的嵌入代码。

访问 YouTube 上的任意视频。
在视频下方，点击“分享”按钮，然后点击“嵌入”按钮。这将打开嵌入视频窗口。
复制嵌入视频窗口中显示的 HTML 代码。

将代码粘贴到 index.html 文件的 <body> 元素中。

<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />

设置视频的宽度和高度

为了避免尺寸问题，设置视频的宽度和高度非常重要。

在 <embed> 标签中添加 height 和 width 属性。width 属性定义视频的宽度，height 属性设置其高度。
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

保存 index.html 文件并在浏览器中打开，以验证视频是否已成功添加。

为不支持的浏览器添加回退方案

并非所有浏览器都支持 <embed> 标签。为了确保你的网页在不支持的浏览器中仍然可用，可以添加一个回退选项。

添加 <object> 标签，并通过参数指定嵌入内容的类型和资源的 URL。

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>你的浏览器不支持 HTML5 视频元素。请升级到现代浏览器。</p>
</object>

保存 index.html 文件并在不支持 <embed> 标签的浏览器（如 Internet Explorer）中打开，验证回退选项是否生效。

总结

恭喜！你已经成功学会了如何使用 HTML <embed> 标签在网页中添加视频。别忘了检查浏览器支持情况，并在必要时使用回退选项。

HTML 外部内容/插件

介绍

HTML 文档结构

使用 HTML 标签添加视频

设置视频的宽度和高度

为不支持的浏览器添加回退方案

总结