Fork me on GitHub

<gfy-cat>

is a polymer element for animated gifs that offers

better performance

integrated controls

smaller file size

ease of use

check it out »

example 1

src attribute contains the valid url to a .gif which then fetches the gfy-cat gfyName tied to the converted media asset

loops infinitely if loop attribute is specified

controls filled with transparent color

example 2

gfyName attribute used because converted URI is known

loops ntimes, then pauses

fill attribute not specified so svg is not filled

polymer logo

polymer

is google's framework for web-components that leverages emerging standards like shadow-dom, <template>, html imports and includes 2-way data binding, filters, events, and other good things that allow you to build and deploy modular html elements

gfylogo

gfycat

is a web conversion service that takes an asset like a .gif from imgur or giphy and hosts the converted webm or mp4 file on AWS

x-gif

gfy-cat was partially inspired by x-gif which does have the benefit of using pngs that can maintain a transparent background, so if you need something borderless, this might be a good solution

desktop compatibility

tested on evergreen browsers (requires platform.js polyfill)

mobile

ios safari has a bunch of quirks that restrict video playback, therefore the fallback is a video that loops, no custom controls

iphone & ipad

does not display dimensions of video properly (you'll get black bars) because video metadata is not loaded automatically

playback controls are not an option

autoplay not supported

allows only 1 video to be played at a time