#BlackLivesMatter
AMP
  • websites

amp-gfycat

Introduction

Use the amp-gfycat component to embed animated GIFs from gfycat in your AMP HTML files.

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.

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

Disabling auto play

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

<amp-gfycat data-gfyid="TautWhoppingCougar"
  width="640"
  height="360"
  layout="responsive"
  noautoplay>
</amp-gfycat>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub