Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display an animated GIF in a github README file?

Tags:

github

this question may sound silly but if I understood correctly Github is unable to display MP4 video files in a README.md, however it is possible to display an animated GIF. Am I right? I was wondering where is the best practice to store that animated GIF file, in the repository itself?

like image 737
Zoltan King Avatar asked Feb 06 '20 12:02

Zoltan King


People also ask

How do I display an animated GIF?

Internet Explorer in Windows 10 allows you to open and view animated GIF images. To open a GIF image, click the File menu in Internet Explorer (press Alt key to see the menu), click Open, click Browse, change the file type to All Files, select the GIF, click Open, and then click OK button to view the GIF.

How do I add a video to a readme in GitHub?

You just drag your video file on your laptop or pc to the markdown file in Github. Done. Easy peasy. Before this, I can embed the video either change it to the gif or create a new file and reference it to the README file.

How to add GIFs to GitHub README?

Now go to Github README.md file and and paste the following markdown in your post including the url you’ve just copied. Make sure you specify the width like giving it a value of 300 or so, or the screenshot will be huge! And here is the README.md file with the GIF added: That’s how we can easily add GIFs to the Github README.md file.

How to add a GIF in React Native README?

We can add the GIF in README like adding any image. We have two options for adding an image in README. 2. We can add as an HTML <img> tag: So far, we have seen what we need and are used for. But we didn’t apply them. Let’s create a new React Native project and add the project’s GIF in the README file.

How do I add an animated GIF to my website?

Adding the Animated GIF to your README Once you've created the animated GIF, you can embed it in your README.md file like you would a regular image. I usually create a 'Demo' Heading in my README under the description of the app and put the animated GIF under the Demo heading along with a link to a demo of the site online.

Can I use gifs in my GitHub page?

We can use GitHub pages for our simple projects containing HTML, CSS, or JavaScript files. I want to share an easy visual way with this article. As you can guess from the title, this method is using GIFs in our README files.


2 Answers

GitHub supports GIFs in READMEs. Here's an example, using Markdown, that I tested on a GitHub repository.

![hippo](https://media3.giphy.com/media/aUovxH8Vf9qDu/giphy.gif)

GIFs inside the repo can be used, too. This link format seems stable:

![til](https://raw.githubusercontent.com/hashrocket/hr-til/master/app/assets/images/banner.png)

Relative paths work too:

![til](./app/assets/images/banner.png)

I think a best practice would be to host the GIF online using a service like Giphy. If it's stored in the repo, anyone who clones that repo will have to download the GIF onto their machine. Unless it's also integral to the application, you might let an external service handle the hosting.

like image 158
Jake Worth Avatar answered Oct 15 '22 16:10

Jake Worth


There is one easy way. Upload your gif to the repo then copy the address of your gif. For example, I uploaded a gif named me.gif. Here is the link.

https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif

then just put in the README.md

![me](https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif)
like image 35
Daisy Avatar answered Oct 15 '22 14:10

Daisy