amp-gfycat

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

示例

width 和 height 属性决定了嵌入在响应式布局中的 Gfycat 的纵横比。

<amp-gfycat
  data-gfyid="TautWhoppingCougar"
  width="640"
  height="360"
  layout="responsive"
>
</amp-gfycat>

属性

data-gfyid

Gfycat ID 可以在任何 Gfycat url 中找到。例如，TautWhoppingCougar 是以下 url 中的 id：https://gfycat.com/TautWhoppingCougar。

width 和 height

width 和 height 属性对于 Gfycat 嵌入来说是特殊的。它们应该是 Gfycat 的实际宽度和高度。系统会自动为 Gfycat 在 GIF 周围添加的“边框”添加空间。

Gfycat 允许多种纵横比。

要在代码中指定宽度和高度，请从嵌入 URL 中复制它们

1. 转到 https://gfycat.com/name，其中 name 是 Gfycat ID。
2. 单击嵌入链接图标 (``)。
3. 复制“固定 iFRAME”字段中指定的宽度和高度。

<iframe
  src="https://gfycat.com/ifr/TautWhoppingCougar"
  frameborder="0"
  scrolling="no"
  width="640"
  height="360"
  allowfullscreen
>
</iframe>

noautoplay

默认情况下，视频会自动播放。

• 当视频滚动到视野之外时，视频会暂停
• 当视频滚动到视野中时，视频会恢复播放
• 如果用户与视频进行了交互（例如，暂停/恢复），并且视频滚动到视野内或外，则视频的状态将保持为用户离开时的状态。例如，如果用户暂停视频，然后将视频滚动到视野外，再返回到视频，则视频仍处于暂停状态。

你可以通过设置 noautoplay 属性来关闭自动播放。

<amp-gfycat data-gfyid="TautWhoppingCougar" width="640" height="360" noautoplay>
</amp-gfycat>

通用属性

此元素包含 通用属性，已扩展到 AMP 组件。

验证

请参阅 AMP 验证器规范中的 amp-gfycat 规则。