Gfycat embeds not working on iOS


#1

Hi folks - when I embed gfycat on my site the embed works perfectly; however, when I try to view on my iPhone it will not work. Onebox appears blank with a play icon in the center. The file will not play.

Here is a sample embed:

I checked this other thread, but mobile was not mentioned.

I’ll reply to this with a screenshot from my phone.


#2

Here is the screenshot.


(Jeff Atwood) #3
<video width="100%" height="100%" controls="">
  <source src="https://zippy.gfycat.com/CarelessAgonizingGrub.webm">
  <a href="https://zippy.gfycat.com/CarelessAgonizingGrub.webm" rel="nofollow">
    https://zippy.gfycat.com/CarelessAgonizingGrub.webm
  </a>
</video>

That’s the actual markup. So it probably depends if the mobile device browser can understand .webm or not. I am guessing desktop browsers can, but mobile browsers can’t.


#4

Ahh - thanks @codinghorror I did not think to check that first and I appreciate the quick response. Looks like a work around is in order on my end for users posting .webm links.


(Mittineague) #5

According to Can I Use support is sketchy and iOS Safari does not support it

http://caniuse.com/#feat=webm


(Rafael dos Santos Silva) #6

Gfycat provides mp4 for browsers who doesn’t want to play along:


#7

Thanks @Falco - I gave the gfycat mp4 version a try. The good thing is, the video is able to load on iOS devices. The only downside is there is no thumbnail. The appearance is exactly the same as my screenshot above. The exception - the video actually plays.

On the desktop, there is no trouble with .webm besides Apple just flat out not supporting it within Safari. Nothing we can do about that (thanks for posting the Can I Use link @Mittineague, super helpful).

One item of positive feedback that I did receive was regarding the size of the gfycat embed within onebox. Everyone that weighed in (regarding desktop browser appearance) seemed to prefer it to the native size of the YouTube embeds within Discourse