AMP
  • 网站

amp-youtube

简介

使用 amp-youtube 将 YouTube 视频嵌入到您的 AMP HTML 文件中。

设置

导入 amp-youtube 组件

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

基本用法

通过视频 ID 嵌入 YouTube 视频。该 ID 在每个 Youtube 视频页面 URL 中都可以找到。

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

自动播放

设置 autoplay 将在 支持的浏览器上,当 YouTube 视频滚动到视图中/视图外时自动播放/暂停。

YouTube 视频在自动播放开始之前会自动静音,当用户点击视频时,视频会取消静音。

如果用户与 YouTube 视频进行了交互(例如,静音/取消静音,暂停/恢复等),并且该视频滚动到视图中或视图外,则该视频的状态将保持用户离开时的状态。

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

自定义参数

所有 data-param-* 属性都将作为查询参数添加到 YouTube iframe src 中。这可用于将自定义值传递给 YouTube 插件,例如是否显示控件,例如配置 relmodestbranding 选项。

<amp-youtube width="480" height="270" layout="responsive" data-param-modestbranding="1" data-param-rel="1" data-videoid="lBTCB7yLs8Y">
</amp-youtube>
需要进一步解释?

如果此页面上的解释未涵盖您的所有问题,请随时与其他 AMP 用户联系,以讨论您的确切用例。

转到 Stack Overflow
未解释的功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您针对自己特别关注的问题进行一次性贡献。

在 GitHub 上编辑示例