Is it possible to embed a flash video into README.md on GitHub? It isn't showing up: https://github.com/mattdipasquale/PicSciP
This is an old post but I was looking for an answer and I found this: https://gifs.com. Just upload the video, then it creates a gif we can add easily in a github markdown. I tried it, the quality of the gif is a good one.
A good way to do so is to convert the video into a gif using any online mp4 to gif converter. Then,
Step:1 Create a folder in the repository where you can store all the images and videos you want to show.
Step:2 Then copy the link of the video or image in the repository you are trying to show. For example, you want to show the video of the GAME PROCESS from the link: (https://github.com/Faizun-Faria/Thief_Police_Game/blob/main/Preview/GameVideo.gif). You can simply write the following code in your README.md file to show the gif:
![Game Process](https://github.com/Faizun-Faria/Thief_Police_Game/blob/main/Preview/GameVideo.gif)
I strongly recommend placing the video in a project website created with GitHub Pages instead of the readme, like described in VonC's answer; it will be a lot better than any of these ideas. But if you need a quick fix just like I needed, here are some suggestions.
See aloisdg's answer, result is awesome, gifs are rendered on github's readme ;)
You could trick the user into thinking the video is on the readme page with a picture. It sounds like an ad trick, it's not perfect, but it works and it's funny ;).
Example:
[![Watch the video](https://i.imgur.com/vKb2F1B.png)](https://youtu.be/vt5fpE0bzSY)
Result:
You can also use the picture generated by youtube for your video.
For youtube urls in the form of:
https://www.youtube.com/watch?v=<VIDEO ID>
https://youtu.be/<VIDEO URL>
The preview urls are in the form of:
https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg
https://img.youtube.com/vi/<VIDEO ID>/hqdefault.jpg
Example:
[![Watch the video](https://img.youtube.com/vi/T-D1KVIuvjA/maxresdefault.jpg)](https://youtu.be/T-D1KVIuvjA)
Result:
If your use case is something that runs in a terminal, asciinema lets you record a terminal session and has nice markdown embedding.
Hit share button and copy the markdown snippet.
Example:
[![asciicast](https://asciinema.org/a/113463.png)](https://asciinema.org/a/113463)
Result:
just to extend @GabLeRoux's answer:
[<img src="https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg" width="50%">](https://youtu.be/<VIDEO ID>)
this way you will be able to adjust the size of the thumbnail image in the README.md file on you Github repo.
Even though this is an old post, I thought it would be helpful to mention an additional (partial and tangential) solution to this question on top of the very helpful workarounds that are already present in this thread.
At the time of writing (6 January 2021), GitHub has released a feature to upload .mp4
and .mov
files up to 10 MB in size to issues, pull requests and discussion comments (as shared here). This is a direct embed, instead of "linking" it to external URLs as what we usually do. It is already out of public beta. You can attach files by dragging and dropping, selecting or pasting them. A preview of GitHub's new notice can be seen here:
Perhaps, in the future, we can slowly nudge GitHub to eventually extend this native feature to READMEs as well.
I combine Alexandre Jasmin and Gab Le Roux answers like this:
[![Demo CountPages alpha](https://share.gifyoutube.com/KzB6Gb.gif)](https://www.youtube.com/watch?v=ek1j272iAmc)
Demo:
You can see this demo on github.
I used gifyoutube here, but I recommend using a local gif converter (like ffmpeg, see how) instead of an online one.
To record your screen to gif directly, you may want to check ScreenToGif.
For simple animations you can use an animated gif. I'm using one in this README file for instance.
Source: Stackoverflow.com