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 URL 中找到的 Gfycat ID。例如，TautWhoppingCougar 是以下 URL 中的 ID：https://gfycat.com/TautWhoppingCougar。

width 和 height

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

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 规则。