AMP

Thank you!

amp-youtube

 
You can now use this component outside valid AMP documents using the experimental Bento version of this component. Learn more in our 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