MOD request Gfycat

[zorer]

http://gfycat.com/ [nofollow] is a site where you can download an animated gif and you get an mp4/webm video saving a lot of space and bandwith.

I downloaded a custom bbcode and create a bbcode for that, using the iframe, but the problem is the resolution of the images

This is the code i used:

Code Select Expand

<iframe src="http://gfycat.com/iframe/{content}" frameborder="0" scrolling="no" width="100%" height="100%" ></iframe>
But the image appears really small and need the size width and height ex:

Code Select Expand

<iframe src="http://gfycat.com/iframe/avideotest" frameborder="0" scrolling="no" width="442" height="334" ></iframe>

I'm using the Custom BBCode 2.03 downloaded from here: http://webdevelop.comli.com/index.php?topic=27.0 [nofollow] and works great, my SMF it's the 2.0.7.

Someone knows how to improve this bbcode or make a mod?

Thanks!

[zorer]

I found a a script for MyBB

http://community.mybb.com/thread-148601.html [nofollow]

this can probably be improved upon, but I couldnt find this anywhere and made my own MyCode for it in a quick 10 minute session this morning.

http://gfycat.com/ [nofollow]

Could probably expand in the future to replace all .gif's links posted with;
"gfycat.com/fetch/" before a url will automatically fetch and convert it.
eg: gfycat.com/fetch/http:/ [nofollow]/mygif.myhost.com/image.gif

I think I may be able to whip a plugin up to do that but my php skills are minimal.

WHY USE IT?
gfy are far smaller than .gifs (and have some other uses)
so on gif-heavy forums you can save your members some bandwidth

Requirements;

This somewhere in the template

Code Select Expand

<script>
(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = 'http://assets.gfycat.com/js/gfyajax-0.517d.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>

GFYcan link example;
http://gfycat.com/SelfreliantSingleFlyinglemur [nofollow]

Gif Size: 4.3 MB
Gfy Size: 457.8 kB
Compression: 9.6 to 1

We only want the part after the slash, so we use;

Regular Expression;

Code Select Expand

\[gfy\]https?:\/\/?gfycat\.com\/([a-z0-9]*)\[/gfy\]

Replacement:

Code Select Expand

<img class="gfyitem" data-id="$1" />

and then this code will embed it;

Code Select Expand

[gfy]gfycat.com/SelfreliantSingleFlyinglemur[/gfy]

Thanks

[eric1234]

Interesting.

[Snek Dankmemes]

I know that this code works:

Code Select Expand

<div class="video-container">
  <video preload="auto" muted="muted" loop="loop" poster="http://thumbs.gfycat.com/{IDENTIFIER}-poster.jpg" style="height: auto; max-width: 100%;" onmousedown="if (!this.controls && event.button == 0) { if (this.paused) { this.play(); } else { this.pause(); }}">
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <a href="http://gfycat.com/{IDENTIFIER}">[ View Video ]</a>
  </video>
  <div style="font-size: 50%; padding: 0px; margin: -2px 0px 2px 0px;">Gfycat Video - Click to Play</div>
</div>


But I don't know how to use it. Can anyone package this into a mod?

[Snek Dankmemes]

Never mind! Friend of mine got it working. I'm going to offer it to the creator of the Ohara YouTube embed mod to see if she wants to include it.

[nend]

Try Open  Embed.
http://custom.simplemachines.org/mods/index.php?mod=4075

Tested on my site and looks to work for that service. Look at the attachment.