How to stop Gfycat BBCode stretching the forum?

Get help developing custom BBCodes or request one.
Post Reply
Dodots
Registered User
Posts: 33
Joined: Mon Mar 16, 2009 4:01 pm

How to stop Gfycat BBCode stretching the forum?

Post by Dodots » Mon Oct 20, 2014 6:25 pm

http://i.imgur.com/nRu8lri.jpg

As you can see from the picture, the actual Gfycat video/GIF has been resized to fit the width, but it's still stretching the post window and I have no idea how to fix it.

Here's the BBCode I'm using:

<div class="video-container">
<video preload="auto" autoplay="autoplay" muted="muted" loop="loop" style="height: auto; max-width: 50%;">
<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" />
Your browser doesn't seem to support the video tag or the webm format. Maybe there's a plugin for that? <a href="http://gfycat.com/{SIMPLETEXT}">View Source Video</a>
</video>
</div>
Last edited by Oyabun1 on Fri Oct 24, 2014 3:54 am, edited 2 times in total.
Reason: Moved from 3.0.x Support forum

Dodots
Registered User
Posts: 33
Joined: Mon Mar 16, 2009 4:01 pm

Re: How to stop Gfycat BBCode stretching the forum?

Post by Dodots » Mon Oct 20, 2014 6:34 pm

Finally fixed it, in case anyone else wants to use Gfycat on their forum it's:


BBCode Usage:

[gfycat]{IDENTIFIER}[/gfycat]

HTML replacement:

<div class="video-container">
<video preload="auto" autoplay="autoplay" muted="muted" loop="loop" style=" overflow: scroll; height: auto; max-width: 800px">
<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" />
Your browser doesn't seem to support the video tag or the webm format. Maybe there's a plugin for that? <a href="http://gfycat.com/{SIMPLETEXT}">View Source Video</a>
</video>
</div>

Help line:

[gfycat]secondhalf[/gfycat]


This will autoplay Gfycat videos instead of GIFs, adjust the mix width to your forum.

Post Reply

Return to “Custom BBCode Development and Requests”