IFRAME Player for a better GIF experience

Gfycat Team
Gfycat Blog
Published in
2 min readMar 7, 2016

Alexa tells us our content is embedded in tens of thousands of sites. Frequently, an editor will create content on Gfycat, copy the IFRAME snippet, paste it into their site, et voila, lo and behold, a Gfycat in all its glory, with millions of colors and at high-frame rate.

We like to think of the IFRAME as the Gfycat Player. It includes all the goodness we want to share from Gfycat with the world, on a third-party site. When we set out to improve the Player experience, we knew there were specific requests from the creators that we wanted to attend to:

  • Improve the sizing of the IFRAME. Our users sometimes wanted a fixed IFRAME size and in other cases, wanted a responsive IFRAME, which took the width allocated by its parent. Now we offer both.
  • Recognize the creator. Our creators are in some cases very prolific. We wanted to acknowledge their contribution and put a link back to their public profile on Gfycat, where users can discover more of the creators’ content.
  • Inspire further sharing. Any content that is exciting, adorable, informative or just funny would elicit further sharing and virality.
  • Play everywhere. A GIF should play everywhere, constantly loop and be high-quality and true to the nature of Gfycat.

With that in mind, we redesigned the Gfycat Player to be a full-fledged high-performance player. Our design guidelines were clear:

  • No UI elements in the way of content. We didn’t want any text overlays to obstruct the content in any way. This meant that we would only show an overlay when the user would lean in (hovering with the mouse or tapping on mobile)
  • Simple and elegant. Content will always be king. The Player should show it in all its glory.
  • Performant. Whereas some of our creators create 4k GIFs at 60 fps, when they’re embedding content in a smaller form factor, we did not want the browser to download the larger GIF unnecessarily. This would not only slow down playback, but also make the browser work extra hard to resize the content. Additionally, mobile devices cannot play video above 30 fps.

We recently relaunched our Player on Twitter, Wordpress and every site that uses the Gfycat IFRAME. We’re seeing a better integration, but also higher engagement since content is auto-playing on all desktop, laptop and smartphone devices. We encourage all our creators to create accounts on Gfycat, so they can manage their content better and get attribution for their work on all sites that embed their content.

Suffice to say, we were all excited to launch thew new and improved Gfycat Player and will continue to develop new features for our amazing users.

--

--

Gfycat Team
Gfycat Blog

Gfycat lets you create, discover and share awesome GIFs, amazing moments and funny reactions