Gfycat in Jekyll

15 Jan 2015

I'm now up to 4 different ways to embed videos into this blog; the latest being Gfycat, a neat mid-point between full-blown YouTube or Vimeo iframes and hosting various HTML5 video formats myself.

Previously I had hacked around with BetterTube to add Vimeo support and am using Brandon Mathis' HTML5 video embed code for the latter.

.. however I couldn't find anything suitable for Gfycat, so I wrote a very simple plug-in to let me specify assets via the generated (adjective)(adjective)(animal) names, eg.

{% gfycat FrequentDependableJackal %}

I used it in the previous post to display the galaxy map zoom-out from a No Man's Sky 2014 trailer.

Source is below, do with it as you please; note you need to specify

{% gfycat_js %}

... somewhere in your default HTML template, which inserts the JavaScript shim for loading Gfycat support.

Author: Harry Denholm, ishani.org

Description: plug the custom gfycat image tags into a page

Syntax {% gfycat gfy_name %}

Example:

{% gfycat LateLikelyDassierat %}

Output:

<img class="gfyitem" data-id="LateLikelyDassierat" />

module Jekyll

class GfyCatTag < Liquid::Tag @video = nil @videoname = ''