Skip to content

Latest commit

 

History

History
92 lines (72 loc) · 2.83 KB

amp-gfycat.md

File metadata and controls

92 lines (72 loc) · 2.83 KB

amp-gfycat

Description Displays a Gfycat video GIF.
Availability Stable
Required Script <script async custom-element="amp-gfycat" src="https://cdn.ampproject.org/v0/amp-gfycat-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples Source Rendered

Example

Gfycat embed with responsive layout:

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

Attributes

data-gfyid

In the url https://gfycat.com/TautWhoppingCougar gfyid is TautWhoppingCougar, can be found in any Gfycat url.

width and height

The width and height attributes are special for the Gfycat embed. These should be the actual width and height of the Gfycat. The system automatically adds space for the "chrome" that Gfycat adds around the GIF.

Gfycat allows many aspect ratios.

To specify the width and height in the code, please copy it from the embed URL. You can see these values by going to: https://gfycat.com/name Click on the embed link </>. Copy the width and height specified in the fixed IFRAME field.

Example:

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

noautoplay

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"
          noautoplay>
  </amp-gfycat>