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

width 和 height

width 和 height 屬性對於 Gfycat 嵌入來說是特殊的。這些應該是 Gfycat 的實際寬度和高度。系統會自動為 Gfycat 在 GIF 周圍添加的「邊框」增加空間。

Gfycat 允許許多長寬比。

若要在程式碼中指定寬度和高度，請從嵌入網址複製

1. 前往 https://gfycat.com/name，其中 name 是 Gfycat ID。
2. 按一下嵌入連結圖示 (``)。
3. 複製「Fixed 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 規則。