JS Embedding gfycat on my site

Question

gfycat.com gives the option to embed a GIF on my site using JS Embed option.

I get a code like this:

<img class='gfyitem' data-id='HighMelodicDairycow' />

The problem that I couldn't find any information on the site about the Javascipt code needed to run it. Any ideas?

Answer 1

I couldn't find it on their site either but here's their GitHub repo for embedding on 3rd party sites: https://github.com/gfycat/gfycat.js/tree/master .

Here are the important parts from the readme:

---

Script

To get the JS Embed working, you just need to add this after the opening body tag:

<script>
  (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'));
</script>

When this script runs, any element that has the class, gfyitem will be converted to a Gfycat embed.

---

Available Options

If you are wanting to change the behaviour of the embed, you can add these to the element as a data attribute. ( data- )

• 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 )

I know you this is probably too late to help you but hopefully this helps anyone else that runs into this issue.