amp-gfycat

Edit on Github
Open in Playground

Introduction

Use the amp-gfycat component to embed animated GIFs from gfycat in your AMP HTML files. Find the official documentation about amp-gfycat here.

Setup

Import the amp-gfycat component.

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

Basic Usage

Embed an animated GIF from gfycat via the data-gfyid attribute. We recommend using responsive layout for better experience. Find a list of all supported layouts here. The width and height attributes should be the actual width and height of the Gfycat, you can find them by going to https://gfycat.com/name, click on the embed link and copy the width and height specified in the fixed IFRAME field.

Example

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

By default video is autoplaying. It's possible to turn it off by setting noautoplay attribute.

Example

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