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 插件,例如是否显示控件,例如配置 rel
或 modestbranding
选项。
<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 上编辑示例-
由 @sebastianbenz 撰写