3
<video width="320" height="240" controls>
<source src="http://i.imgur.com/91S22q6.gifv" type="video/webm">
Your browser does not support the video tag.
</video>

This doesn't seem to load the video. I assume the .gifv is messing it up somehow when it needs to use .webm. When I change it to .webm, it still doesn't load. Is there any way to embed a .gifv?

isherwood
  • 58,414
  • 16
  • 114
  • 157
frosty
  • 2,779
  • 6
  • 34
  • 63

3 Answers3

6

Iframe method:

<iframe src="https://imgur.com/91S22q6/embed" width="200" height="220" scrolling="no" style="border:none;"></iframe>

HTML video method using webm: 

<video preload="auto" autoplay="autoplay" loop="loop" style="width: 200px; height: 200px;">
    <source src="//i.imgur.com/91S22q6.webm" type="video/webm"></source>
</video>

I changed the source extension from .gifv to .webm, removed the controls tag, set preload to auto, added autoplay, and added loop.

spencer.sm
  • 19,173
  • 10
  • 77
  • 88
  • Is there any way to take a 'screenshot' of the .gifv? I have a gif-to-png PHP script which captures the first frame and then the user can press a play button, otherwise they may scroll to it and view it half-way through or something. – frosty Jul 28 '15 at 16:56
  • http://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player – spencer.sm Jul 28 '15 at 17:00
  • @spencer.sm Thanks! I take it there are no arguments to add i.e. autoplay and it's not really possible to make that work in a responsive layout? – marksyzm Sep 25 '16 at 13:19
4

I recently had an issue with embedding a gifv using the webm extension. I had success replacing the "webm" extension with "mp4". This was only for a recently uploaded file, an older file did not have any issue.

<video preload="auto" autoplay="autoplay" loop="loop" style="width: 200px; height: 200px;">
    <source src="//i.imgur.com/91S22q6.mp4" type="video/mp4"></source>
</video>

This imgur support page seems to indicate using mp4 rather than webm: Sharing Posts, GIFs, GIFvs, and Images

yousurname
  • 41
  • 2
1

The 'webm' method has been discontinued now. The new method is: 

<video preload="auto" autoplay="autoplay" loop="loop" style="max-width: 90%; height: auto;">
  <source src="https://i.imgur.com/hxcsP6x.mp4" type="video/mp4">
</video>
Code Lover
  • 723
  • 1
  • 10
  • 24