# Oneboxed gfycat slower than embedded video

**URL:** <https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313>\
**Category:** Feature\
**Created:** [2017年三月3日 19:27 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313 "2017-03-03T19:27:43Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Drew\_Warwick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/drew_warwick/32/80591_2.png) [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)\
**Post date:** [2017年三月3日 19:27 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/1 "2017-03-03T19:27:43Z")

</div>

I noticed that the oneboxed gfycat video plays at a slower FPS than the embedded version. Compare below:

Oneboxed (achived by pasting gfycat link into post)  
[https://gfycat.com/AmusingPoshCleanerwrasse](https://gfycat.com/AmusingPoshCleanerwrasse)

Embedded (achieved by copying video location from gfycat and pasting into post)  
[https://fat.gfycat.com/AmusingPoshCleanerwrasse.webm](https://fat.gfycat.com/AmusingPoshCleanerwrasse.webm)

Is this intentional for the sake of network resources, or is it a bug? I notice that the direct (second) link is on [fat.gfycat.com](http://fat.gfycat.com) instead of [gfycat.com](http://gfycat.com), so I’m not sure if maybe gfycat updated their backend and Discourse hasn’t adjusted yet.

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2017年三月3日 19:42 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/2 "2017-03-03T19:42:11Z")

</div>

Looks like Gfycat is giving only the mobile version of the video on their oembed now. Will ping the Gfycat guys.

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2017年三月4日 21:25 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/3 "2017-03-04T21:25:50Z")

</div>

GfyCat got back to me, and this change was intended.

The alternative is to someone to step up and implement a special Onebox for GfyCat using the [official library](https://github.com/gfycat/gfycat.js/tree/master) so adding #pr-welcome here.

---

<div class="post-metadata">

**Author:** ![nbianca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nbianca/32/157984_2.png) [@nbianca](https://meta.discourse.org/u/nbianca)\
**Post date:** [2017年三月12日 21:40 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/4 "2017-03-12T21:40:17Z")

</div>

Hello @Falco,

I see that the official gfycat.js library requires a piece of code (the library loader, a simple `<script>` tag from their `README.md`) to be included just once for all videos. Is there any way of achieving that in OneBox?

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2017年三月14日 16:44 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/5 "2017-03-14T16:44:27Z")

</div>

Hey @nbianca after reading this again and taking at how the lib works I’m not sure we want to use it.

We could try to create our own logic for this Onebox, creating a video tag with both webm and mp4 sources, with the `loop` on and autoplay off.

What do you think @zogstrip ?

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [2017年三月14日 16:59 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/6 "2017-03-14T16:59:54Z")

</div>

> [@Falco](#):
>
> We could try to create our own logic for this Onebox, creating a video tag with both webm and mp4 sources, with the loop on and autoplay off.

That’s indeed the way to go.

---

<div class="post-metadata">

**Author:** ![nbianca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nbianca/32/157984_2.png) [@nbianca](https://meta.discourse.org/u/nbianca)\
**Post date:** [2017年三月14日 19:43 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/7 "2017-03-14T19:43:14Z")

</div>

I am working on this.

EDIT: Done.  
[https://github.com/discourse/onebox/pull/345](https://github.com/discourse/onebox/pull/345)

---

<div class="post-metadata">

**Author:** ![Drew\_Warwick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/drew_warwick/32/80591_2.png) [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)\
**Post date:** [2017年三月14日 22:19 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/8 "2017-03-14T22:19:26Z")

</div>

> [@Falco](#):
>
> autoplay off

Any chance autoplay could be enabled by default for the gfycat onebox instead? Gfycat clips are essentially glorified gifs (even limited to 15 seconds), so preferably they’d behave similarly. There shouldn’t be an issue with bandwidth because webm files are substantially smaller than their gif equivelants which already autoplay (the one in the OP is 1/6th the size of the equivalent gif).

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2017年三月14日 22:33 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/9 "2017-03-14T22:33:05Z")

</div>

Can they contain audio? If so, then autoplay off will greatly save the ears of many.

---

<div class="post-metadata">

**Author:** ![Drew\_Warwick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/drew_warwick/32/80591_2.png) [@Drew\_Warwick](https://meta.discourse.org/u/Drew_Warwick)\
**Post date:** [2017年三月14日 23:13 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/10 "2017-03-14T23:13:48Z")

</div>

Gfycat clips do not contain audio. [Audio is stripped](https://www.reddit.com/r/gfycat/comments/1z9d8e/gfycat_open_source/cfsunuy/) from uploaded files that do contain it.

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2017年三月14日 23:18 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/11 "2017-03-14T23:18:33Z")

</div>

Found a tweet confirming that too (from 2014, but browsing the site, it seems legit still).

> <https://twitter.com/Gfycat/status/508739281427640320>

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2017年三月14日 23:26 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/12 "2017-03-14T23:26:03Z")

</div>

We definitely want the tag `loop` in there, and about `autoplay` I did some research.

I went on some Gaming and Anime Discourses, and I believe they want to keep the current behavior, wrt, autoplay and loop **ON**.

Looking trough this [Chrome Blog](https://developers.google.com/web/updates/2016/07/autoplay) I believe that if we use:

```
<video controls loop autoplay muted>

```

we get the better of all worlds, consistent behavior and bandwidth savings.

---

<div class="post-metadata">

**Author:** ![nbianca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nbianca/32/157984_2.png) [@nbianca](https://meta.discourse.org/u/nbianca)\
**Post date:** [2017年三月15日 18:53 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/13 "2017-03-15T18:53:16Z")

</div>

Hello @Falco ,

I made the changes. Probably, the most bandwidth savings would be made if we used the low quality source. However, there is no way we can actually switch between sources and I am not sure if the browser can do that by itself (taking into consideration bandwidth, if on desktop or mobile, etc.)

Anyway, it is ready for merge.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2017年三月15日 23:58 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/14 "2017-03-15T23:58:18Z")

</div>

Doesn’t help for video, unfortunately, but there is an emerging multiple image format for supporting retina devices and non-retina devices, etc:

> **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=srcset)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

I do want us to start doing `srcset` natively in the future for images!

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2018年二月15日 13:24 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/15 "2018-02-15T13:24:11Z")

</div>

[https://gfycat.com/MiserlyQuickFrog](https://gfycat.com/MiserlyQuickFrog)

I just updated the gfycat onebox, to be more inline with what we have.

We now support:

- Support both `https://gfycat.com/$id` and `https://gfycat.com/gifs/detail/$id` URLs
- Favicon
- Title
- Author
- Tags
- Autoplay
  - Desktop: Only if smaller than 10MB
  - Mobile: Only if smaller than 10MB and when the gfy is in the user viewport

---

<div class="post-metadata">

**Author:** ![twaith](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/twaith/32/89815_2.png) [@twaith](https://meta.discourse.org/u/twaith)\
**Post date:** [2018年二月15日 17:44 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/16 "2018-02-15T17:44:18Z")

</div>

Using this documentation here (we recently published it on our docs) will make all shared Gfycats faster regardless of browser. There is logic in there that detects factors like browser, OS, network speed, etc. and we also provide users the option to toggle between high quality and lower resolution. [https://developers.gfycat.com/iframe/](https://developers.gfycat.com/iframe/)

---

<div class="post-metadata">

**Author:** ![twaith](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/twaith/32/89815_2.png) [@twaith](https://meta.discourse.org/u/twaith)\
**Post date:** [2018年二月15日 17:46 UTC](https://meta.discourse.org/t/oneboxed-gfycat-slower-than-embedded-video/58313/17 "2018-02-15T17:46:47Z")

</div>

I like what you did showing who made the Gfycat and showing the title and tags. Thanks Rafael!