AMP

amp-youtube

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

显示 YouTube 视频。

 

Required Scripts

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

显示 YouTube 视频。

必需的脚本 <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
支持的布局 fill、fixed、fixed-height、flex-item、nodisplay、responsive
示例 amp-youtube 代码示例(带注释)

示例

采用 responsive 布局时,示例中的宽度和高度应针对 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>

属性

autoplay 如果此属性存在并且浏览器支持自动播放:
  • 视频将在自动播放开始之前自动静音
  • 视频滚动到可视区域以外时,将暂停播放
  • 视频滚动到可视区域以内时,将恢复播放
  • 用户点按视频后,视频将取消静音
  • 如果用户已与视频互动(例如静音/取消静音、暂停播放/恢复播放等),然后将视频滚动到可视区域以内/以外,则视频将一直保持用户最后一次互动后的状态。例如,如果用户暂停视频,将视频滚动到可视区域以外,然后再返回到视频,则视频仍将处于暂停状态。
data-videoid 每个 YouTube 视频页面网址都包含 YouTube 视频 ID。 例如,在 https://www.youtube.com/watch?v=Z1q71gFeRqM 这个网址中,Z1q71gFeRqM 为视频 ID。
data-live-channelid YouTube 频道 ID,可提供稳定的直播网址。例如,在 https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q 这个网址中,UCB8Kb4pxYzsDsHxzBfnid4Q 为频道 ID。您可以通过提供 data-live-channelid 属性(而非 data-videoid 属性)来嵌入直播(而非视频)的稳定网址。频道不含默认占位符。您可以按照上面的第 2 个示例为视频提供占位符。
data-param-* 所有 data-param-* 属性都将作为查询参数添加到 YouTube iframe src 中。这可用于将自定义值传递到 YouTube 插件,例如是否显示控件。 键和值将采用 URI 编码。键将采用驼峰式大小写格式。
  • `data-param-controls=1` 变为 `&controls=1`
如需了解 YouTube 的更多参数选项,请参阅 YouTube 嵌入式播放器参数
dock 需要 amp-video-docking 扩展。 如果此属性存在并且视频通过手动方式播放,则当用户滚动到视频组件的可视区域以外时,视频将“最小化”并固定到角落或某个元素。如需了解更多详情,请参阅关于 docking 扩展的文档
credentials(可选) credentials 选项定义为通过 Fetch API 指定的值。
  • 支持的值:`omit`、`include`
  • 默认值:`include`
如果您希望在隐私权保护增强模式下使用 YouTube 播放器,请传递 omit 值。 通常,YouTube 会在加载播放器时设置其 Cookie。在隐私权保护增强模式下,Cookie 是在用户点击播放器后设置的。
常见属性 此元素包含扩展到 AMP 组件的常见属性

验证

请参阅 AMP 验证工具规范中的 amp-youtube 规则

需要更多帮助?

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub