How to add GIF controls in a markdown file

Question

Say I have a markdown file with the following gif:

![OMD, that smile...](https://media.giphy.com/media/3ndAvMC5LFPNMCzq7m/giphy.gif)

Using pandoc, I can convert that .md file into a self-contained HTML file by running

pandoc smile.md -o smile.html --self-contained

When opened, the resulting HTML file immediately starts playing the image. However, I would like the image only to be played when the user clicks on it. Is there a way to insert this feature somewhere in the process above, either in the md file or in the pandoc call?

I have done some searching and read something about using HTML tags to insert the image and JS to create the controls (if I understood correctly), but I couldn't make it work in my simple example and it actually sounded like more work than it should.

Answer 1

The easiest way would be to use the mp4 of that video instead of the gif, like so:

![OMD, that smile...](https://media.giphy.com/media/3ndAvMC5LFPNMCzq7m/giphy.mp4){loop=""}

Newer pandoc versions insert this as a <video> element with all the default controls available to the user.

Answer 2

@tarleb's answer the question and is marked as accepted for that. However, for whatever reason sometimes I can't get this to work reliably enough.

What seems to always work for me is inserting the video as an HTML tag inside the markdown file:

<video src="https://media.giphy.com/media/3ndAvMC5LFPNMCzq7m/giphy.mp4" controls></video>