amp-youtube

1.0 0.1

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

用法

显示一个 YouTube 视频。

使用响应式布局时，示例中的宽度和高度应为 16:9 宽高比的视频产生正确的布局

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270"
></amp-youtube>

<amp-youtube
  id="myLiveChannel"
  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
  width="358"
  height="204"
  layout="responsive"
>
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"
  />
</amp-youtube>

属性

自动播放

如果此属性存在，并且浏览器支持自动播放

• 视频在自动播放开始前会自动静音
• 当视频滚动出视图时，视频会暂停
• 当视频滚动进入视图时，视频会恢复播放
• 当用户点击视频时，视频会取消静音
• 如果用户与视频进行了交互（例如，静音/取消静音、暂停/恢复等），并且视频滚动进入或退出视图，则视频的状态将保持为用户离开时的状态。例如，如果用户暂停视频，然后将视频滚动出视图并返回到视频，则视频仍会暂停。

循环播放

如果存在此属性，则视频或播放列表将在结束后再次播放（从头开始）。

data-videoid

每个 YouTube 视频页面 URL 中找到的 YouTube 视频 ID。

例如，在此 URL 中：https://www.youtube.com/watch?v=Z1q71gFeRqM，Z1q71gFeRqM 是视频 ID。

data-live-channelid

提供稳定直播 URL 的 Youtube 频道 ID。 例如，在此 URL 中：https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q，UCB8Kb4pxYzsDsHxzBfnid4Q 是频道 ID。 您可以提供 data-live-channelid 而不是 data-videoid 属性，以便为直播嵌入稳定的 URL，而不是嵌入视频。 频道不提供默认占位符。 您可以按照上面的示例 2 为视频提供占位符。

data-param-*

所有 data-param-* 属性（data-param-autoplay 和 data-param-loop 除外）都将作为查询参数添加到 YouTube iframe src 中。这可用于将自定义值传递到 YouTube 插件，例如是否显示控件。

键和值将采用 URI 编码。键将采用驼峰式命名

data-param-controls=1 变为 &controls=1

有关 YouTube 的更多参数选项，请参阅YouTube 嵌入式播放器参数。

停靠

需要 amp-video-docking 组件。如果存在此属性且视频正在手动播放，则当用户滚动出视频组件的视觉区域时，视频将被“最小化”并固定到角落或元素。

凭据（可选）

定义由 Fetch API 指定的 credentials 选项。

• 支持的值：omit、include
• 默认值：include

如果您想使用隐私增强模式下的 YouTube 播放器，请传递 omit 值。

通常，YouTube 会在播放器加载时设置其 Cookie。在隐私增强模式下，Cookie 会在用户点击播放器后设置。

标题（可选）

为组件定义一个 title 属性，以传播到基础 <iframe> 元素。默认值为 "YouTube 视频"。

通用属性

此元素包含扩展到 AMP 组件的通用属性。

验证

请参阅 AMP 验证器规范中的 amp-youtube 规则。