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>
Supported Layouts
显示 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 编码。键将采用驼峰式大小写格式。
|
| dock | 需要 amp-video-docking 扩展。 如果此属性存在并且视频通过手动方式播放，则当用户滚动到视频组件的可视区域以外时，视频将“最小化”并固定到角落或某个元素。如需了解更多详情，请参阅关于 docking 扩展的文档。 |
| credentials（可选） | 将 credentials 选项定义为通过 Fetch API 指定的值。
omit 值。 通常，YouTube 会在加载播放器时设置其 Cookie。在隐私权保护增强模式下，Cookie 是在用户点击播放器后设置的。 |
| 常见属性 | 此元素包含扩展到 AMP 组件的常见属性。 |
验证
请参阅 AMP 验证工具规范中的 amp-youtube 规则。
需要更多帮助？
您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。
前往 Stack Overflow 发现错误或缺少功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
前往 GitHub