Embed script to generate gfycat embeds on 3rd party websites
Branch: master
Clone or download
gfycatjeff Merge pull request #22 from lanre-ade/fix-autoplay
fix scroll values breaking autoplay
Latest commit 584e1f9 Oct 6, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests Additional classes can be set to root element, not deleted after init Sep 20, 2016
web remove debug Oct 5, 2017
.gitignore Version 1.1 Sep 2, 2016
.travis.yml Travis fix reverted Sep 20, 2016
LICENSE Improved version of js embed Aug 31, 2016
README.md Readme update Dec 13, 2016
gulpGlobs.js Scroll optimization Dec 13, 2016
gulpfile.js Scroll optimization Dec 13, 2016
karma.conf.js Improved version of js embed Aug 31, 2016
package.json Improved version of js embed Aug 31, 2016



####Version History:

  • 0.1: Initial revision
  • 1.0: Fixes to initialization, cleaned up UI, support for mobile browsers
  • 1.1: Support for autoplaying looping MP4 on iOS 10, GIF view count analytics
  • 1.2: New options: data-hd, data-playback-speed; Custom classes can be added to root element before init

Embed script to generate gfycat embeds on 3rd party websites.

The intent of this Javascript file is to provide a simple way for web publishers to include Gfycat embeds on their websites.

This code is provided on Github, so users can request changes, contribute code, or fork a branch. Please contribute to the project to help improve it with actual real world needs.


Include this script on your webpage right after the opening <body> tag

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://assets.gfycat.com/gfycat.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'gfycat-js'));

Include an embed tag(s)


<div class="gfyitem" data-title=true data-autoplay=false data-controls=true data-id="BestYellowishElephantseal"></div>

The options are:

  • data-id: the Gfycat id (required)
  • data-controls: include controls for pause/speed/etc (default: false)
  • data-title: show the title on hover (default: false)
  • data-autoplay: automatically start playback on page load (default: true)
  • data-expand (DEPRECATED, please use data-responsive): expand video element to fill the space of its container (default: false)
  • data-responsive: expand video element to fill the space of its container (default: false)
  • data-max-height (works only together with data-responsive=true): set height upper bound for a responsive video
  • data-optimize: play videos when they're 50% visible, and lazy loads gifs (default: true)
  • data-gif: load .gif file instead of video (default: false)
  • data-hd: load high quality video (default: true)
  • data-playback-speed: set video playback speed, values from the interval [0.125, 8] (default: 1)

###Source code

The code is broken down into two files:

  • gfyCollection.js: gfyCollection calls gfyCollection.init() after the script is loaded. Its function is to find every Gfycat embed on the page and create a gfyObject for it.
  • gfyObject.js: a new gfyObject instance is created for each gfycat embed. It contains all of the functions to generate the DOM and manipulate the video.

gfyCollection.init should be called on gfyitem elements which appear on the page after the page load.

The default key the embed script looks for is class="gfyitem", or the class specificed in gfyCollection.init('classname').

Each instance of gfyObject has an init method. It's possible to initialize an object with new data.


<div class="gfyitem" id="BestYellowishElephantseal"></div>


var collection = gfyCollection.get();
collection[0].init({id: "BareSecondaryFlamingo"});


npm install
gulp build

###Testing gulp test - runs all the tests once

gulp tdd - watching for file changes and runs all the tests