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?
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.
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.
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.
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.
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.
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.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With