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>
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