HTML YouTube

在 HTML 中嵌入 YouTube 视频

从 YouTube 等平台嵌入视频通常比自己托管和管理视频文件（处理格式兼容性和流媒体 (streaming)）更容易。

为什么从 YouTube 嵌入？

视频格式在不同浏览器和设备上的兼容性可能很复杂。托管大型视频文件还会消耗带宽，并需要强大的服务器基础设施。

YouTube 处理视频转换、流媒体 (streaming) 优化，并提供熟悉的播放器界面。

查找 YouTube 视频 ID

每个 YouTube 视频都有一个唯一的 ID。

你可以在视频的 URL 中找到 ID。例如，在 https://www.youtube.com/watch?v=dQw4w9WgXcQ 中，视频 ID 是 dQw4w9WgXcQ。

你将使用此 ID 来嵌入视频。

使用

嵌入 YouTube 视频的标准方法是使用

1. 将你的视频上传到 YouTube（或使用现有视频）。
2. 记下视频 ID。
3. 在你的 HTML 中创建一个
4. 将 src 属性设置为 https://www.youtube.com/embed/VIDEO_ID，将 VIDEO_ID 替换为实际的 ID。
5. 指定 width 和 height 属性（尽管使用 CSS 更适合响应式设计 (responsiveness)）。
6. 添加一个 title 属性来描述视频，以提高可访问性 (accessibility)。
7. （可选）向 URL 查询字符串 (query string) 添加参数 (parameters) 以进行自定义。

基本嵌入示例：

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player: Rick Astley - Never Gonna Give You Up"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

关键的

• src: 要嵌入的内容的 URL（YouTube 嵌入 URL）。
• width, height: 定义播放器尺寸（以像素为单位）（使用 CSS 控制更好）。
• title: 对可访问性至关重要。 简要描述 iframe 的内容（例如，‘YouTube 视频播放器：[视频标题]’）。
• frameborder=“0”: 移除默认的 iframe 边框（标准做法）。
• allow: 指定 iframe 中允许的功能（例如，全屏 (fullscreen)、自动播放 (autoplay) - 浏览器策略可能会覆盖）。
• allowfullscreen: 允许视频播放器进入全屏模式 (fullscreen)。

使用 CSS 实现响应式嵌入

固定的 width 和 height 属性不是响应式的。要使视频播放器在不同屏幕尺寸上正确调整大小并保持其宽高比 (aspect ratio)（通常为 16:9），请使用 CSS。

HTML 结构：

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
          title="Responsive YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>

CSS 样式：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这种技术创建了一个保持宽高比的容器，而 iframe 填充了该容器。

YouTube 播放器参数

你可以通过将参数 (parameters) 添加到 src URL 的查询字符串 (query string) 中（在 ? 之后）来自定义播放器。多个参数之间用 & 分隔。

示例：https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1&playlist=VIDEO_ID

常见参数：

• autoplay=1: 尝试自动播放视频。注意： 除非视频静音或用户与网站进行了交互，否则现代浏览器通常会阻止自动播放。
• controls=0: 隐藏默认的播放器控制（请谨慎使用，因为它会影响可用性 (usability)）。controls=1（默认）显示控制。
• loop=1: 使视频循环播放。需要将 playlist 参数设置为相同的视频 ID，以实现单个视频循环。
• playlist=VIDEO_ID1,VIDEO_ID2: 播放视频列表。与 loop=1 一起使用，以实现单个视频循环。
• mute=1: 默认情况下静音视频播放器。
• start=30: 从视频的第 30 秒开始播放。

请查阅官方的 YouTube 播放器参数文档，了解最新列表和行为，因为参数可能会更改。

隐私增强模式

为了减少跟踪，你可以通过将嵌入 URL 的域名从 www.youtube.com 更改为 www.youtube-nocookie.com 来使用 YouTube 的隐私增强模式。

<iframe width="560" height="315"
        src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
        title="Privacy-enhanced YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

这样可以防止 YouTube 在用户播放视频之前在其浏览器上存储 cookie。

已弃用的嵌入方法

自 2015 年 1 月起，使用