Is it possible to embed a flash video into README.md on GitHub? It isn't showing up: https://github.com/mattdipasquale/PicSciP
18 Answers
Add a url to video file in your ReadMe.
Github now supports videos, see more detailed answer here: https://stackoverflow.com/a/4279746/1092815
You can see a live example here (See at the end of the readme):
https://github.com/alelievr/Mixture/blob/0.4.0/README.md
Github Pages
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.
Use a gif
See aloisdg's answer, result is awesome, gifs are rendered on github's readme ;)
Use a video player picture
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.sstatic.net/Vp2cE.png)](https://youtu.be/vt5fpE0bzSY)
Result:
Use youtube's preview picture
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 ID>
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:
Use asciinema
If your use case is something that runs in a terminal, asciinema lets you record a terminal session and has nice markdown embedding.
Hit the share button and copy the markdown snippet.
Example:
[![asciicast](https://asciinema.org/a/113463.png)](https://asciinema.org/a/113463)
Result:
-
5There are also cool tools out there to create a gif or animated svg images from your asciicasts (e.g. github.com/marionebl/svg-term-cli ) ;-)– JepZCommented Jun 13, 2018 at 8:12
-
-
3Seems only certain url to videos are permitted, eg: url points to inside of your repo / url begin with
https://user-images.githubusercontent.com
. \ And it must be just a line of url, no other syntax around. \ (The use of html<video>
does nothing.) \ Otherwise it just gets ignored.– Nor.ZCommented May 20, 2023 at 7:03
Update May 2021:
Video uploads now generally available
Video upload is now supported everywhere you can author Markdown in GitHub, including from the mobile app.
Share demos, show reproduction steps, and more in issue, pull request, and discussion comments as well as on repository Markdown files such as READMEs.
As Lauren Brose (Product Manager for GitHub Issues) details, this can help:
- Help a maintainer reproduce a bug
- Provide context on pull requests for reviewers
- Share how a feature might take shape
- Upload your video from anywhere! (Uploading videos from both the iOS and Android GitHub mobile apps is now available to all users)
Note: as commented by Sancarn, webm
(open web media project) does not seem to be directly supported.
Although... as noted by Garrett LeSage:
If you change the extension from
.webm
to.mov
(or just tack on.mov
after.webm
), @GitHub accepts the video and even displays it inline.
Matthew Gregg adds:
Does
webm
play on iOS devices? This might be why they soft block.
Update Feb. 2021, as noted by Abhishek Singh in the comments, and Nat Friedman on Twitter:
You can now – finally! – drop images and videos (mp4, gif) onto the Markdown file editor on GitHub.
Paste works too, if you're into that kind of thing.
It's worked in issues and PRs for a while; what's new here is support in markdown files.GitHub Enterprise Server tends to lag http://github.com by a couple of months, but it will get there in a future release.
Kyle Daigle (Senior Director of Special Projects at GitHub) adds:
Currently, the file is stored as an asset outside the repository (sort of like an image uploaded to an image).
(Uploads to githubusercontent and stores it there. Then makes a link in the markdown to that uploaded image.)The team is interested in exploring adding the image to the repo too... would you want something like that?
Sven-Michael Stübe comments:
I usually add the images to my repo. Especially if you host your blog as github page w/ a custom domain.
But I think this feature would also add a lot of complexity. It's not a big pain to add the image manually. For PRs+Comments the drag&drop is more essential
Kyle answers:
For the blog case (which is what made us think about image upload to the repo) you're totally right.
This type of drag and drop is helpful when adding an image to aREADME
or other in-repo documentation though (when you don't want to upload to the repo).
That feature has come a long way since its initial proposal... back in 2012(!)
Update Dec. 2020: see "Video upload public beta ", which embeds video (embedding only, not link/reference)
2010: The "Github Flavored Markdown" doesn't support this kind of feature for any page:
An old support thread "Embed YouTube videos in markdown files" stated:
With
pages.github.io
, yes, everywhere else, no.
(Note: as detailed in "Github Top-Level Project Page", github.io is the new domain for user and organization pages since April 2013.
The page GitHub publication is presented here)
This could be a feature request like the syntax highlighting was.
For instance: "HTML5 video in markdown" (August 2010):
Is there any way to implement a HTML5 video into the
README.markdown
file?Not currently but we might be expanding what you can do with the READMEs in the future.
In the meantime, you can do this with GitHub Pages and our Wikis.
Benjamin Oakes confirms in the comments (May 2012):
I sent in a support request. The response was that embedding videos is not supported.
-
4Those links seem to be broken; they take me to github.com/contact now. Does anyone have access to an archived version? I'm having a hard time getting it out of the Google Cache or the Wayback Machine. Commented May 2, 2012 at 12:45
-
2For what it's worth HTML5 video in wiki pages no longer seems to work. Commented May 2, 2012 at 12:52
-
33
-
3@hyipscript Not sure actually: that quotes comes from a 5-years old GitHub support thread (I have restored the link in the answer), from [ Chris Wanstrath -- defunkt](github.com/defunkt), one of the co-founders of GitHub. I don't have more details about that.– VonCCommented Oct 20, 2015 at 20:09
-
1It's 2018 and this is still not supported. Obviously they don't care even the slightest about this feature.– trusktrCommented Jan 6, 2018 at 7:05
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.
-
3I think this should be the selected answer. This is the closest to a video as you can get, and to most people it is a video. What is a video? Still frames moving in sequence to give us the illusion it is playing. An animated gif is the same thing... Though the OP specifically asked for flash video, which is impossible, you would use this method to convert the flash video into an animated gif.– WadeCommented May 20, 2015 at 5:09
-
2you sir are a smart one; I'm using this everywhere now. You might want to add which url to choose i.e. direct url (I couldn't find a share.gifyoutube.com url though) Commented Nov 1, 2016 at 19:07
-
Note that by now the site is gifs.com, gets you downloads from j.gifs.com and requires you to have a gifs.com account in order to download Commented Jan 7, 2017 at 12:08
-
2
-
This Answer helpful me, and applicated in my repository - github.com/jonathasborges1/SpringHellov2 Commented Oct 28, 2021 at 22:20
Not sure why no one mentioned this simplest way which works as of today(2022).
You can use the below syntax everywhere on Github, including markdown files like Readme.md
<video src='your URL here' width=180/>
if you would like to display two videos side by side
caption1 | caption2
:-: | :-:
<video src='video1.mov' width=180/> | <video src='video2.mp4' width=180/>
This works for mov and mp4 videos (tested)
Here's a github comment that shows that this works.
-
24Doesn't seem to work inside Github Readme.md, with Vimeo videos at the moment. Also breaks all subsequent markdown after the video tag.– MRuleCommented Oct 7, 2021 at 13:45
-
7@MRule it works, you just need to close the video tag, e.g.
<video src="https://user-images.githubusercontent.com/126239/151127893-5c98ba8d-c431-4a25-bb1f-e0b33645a2b6.mp4"></video>
example here github.com/mfitzp/diffcast– mfitzpCommented Jan 26, 2022 at 8:26 -
4It shows the video, but for some reason the height and width isn't working for me. Commented Jan 31, 2022 at 18:26
-
9I tried embedding a video from the repo directly in the page using this technique, and github just seems to strip the video tag entirely.– ndtrevivCommented Apr 22, 2022 at 14:50
-
1In README a self-closing tag
<video />
breaks subsequent Markdown, as MRule mentions. With a separate closing tag<video></video>
video doesn't render as Christian mentions. If your video is uploaded to GitHub, then a plain URL seems to work, example: github.com/rybak/atlassian-tweaks/blob/…– andrybakCommented Jul 22, 2023 at 14:47
For simple animations you can use an animated gif. I'm using one in this README file for instance.
-
1@HarishKayarohanam "till github brings in this feature" generally speaking or are/were they working on such a thing? If so, they should've finished it by now? :)– aaaCommented Apr 26, 2016 at 18:37
-
2@Paul No, they are not working on this, as I learnt couple months ago... Feel free to bump the issue! github.com/github/markup/issues/538 Commented May 16, 2016 at 22:31
-
When doing this please consider the accessibility. People with attention difficulties can struggle to take in text if there is a moving animation visible next to it.– Eneroth3Commented Jan 7, 2020 at 16:03
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.
-
5
-
3The accepted answer suggests README is supported - upload works fine, embed not working here for mp4– lysCommented Feb 27, 2021 at 15:50
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.
-
Confirming, I tried this and it look and works great. Thanks!– leorleorCommented Mar 1, 2021 at 20:52
The simplest way should be:
- Open the online README.md editor
- Drag your video file to the box which shows "Attach files by dragging & dropping..."
- You will see a link added to your source codes. Just wrap it with the HTML. Eg.,
<video src="https://user-images.githubusercontent.com/aaa.mp4"></video>
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.
-
Thank you for this! This is a great website, and now you can easily add gifs in Github like this ![](name-of-giphy.gif)– JenCommented Dec 18, 2020 at 0:56
Drag and drop MP4 video, as mentioned in many other solutions above, but there's one important thing to do to allow the video being displayed nicely and embedded: leave an empty line above the url that displays shortly after you drag and drop the video to your section, like this:
**Before:**
Here is the video of a bug:
https://and-here-comes-the-url
some other text...
So you'll get the expected result.
I was struggling for soo long (since this feature is available on GitHub) till today to find this! Without leaving an empty line drag and drop never worked for me to achieve the expected look: the video simply doesn't display embedded, and just an url occurs. So if you do this...
**Before:**
Here is the video of a bug:
https://and-here-comes-the-url
some other text...
You'll get this result.
This should work also for adding videos to GH comments and everywhere on GH. Hope this helps.
It is now August 2022. Looks like Github already allows embedding videos directly into the readme. I found this repo and it seems to have worked exactly what I needed.
Readme.md content
### 🙅 No Content-Blocking vs. Content-Blocking
https://user-images.githubusercontent.com/16564273/125283630-9845d180-e2e6-11eb-8b7d-f30a8f2eae8a.mp4
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-Robber-Landlord-Police/blob/main/Preview/gif_english.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-Robber-Landlord-Police/blob/main/Preview/gif_english.gif)
It is old post and TLDR of first solution:
- I just opened "edit" my Readme.md
- Drag and drop video inside readme edit section.
- Wait for it to upload and give you the URL something like
https://user-images.githubusercontent.com/...
- See preview and it just works !
Eg:
Readme : https://github.com/s8sachin/subtitler/blob/master/README.md
Raw : https://raw.githubusercontent.com/s8sachin/subtitler/master/README.md
Note:
- The file wont be stored under your repo.
- Webm didn't work for me, used mp4 instead.
-
Thank you! This totally works in README.md files on github.com 👍🏽 Commented Oct 4, 2022 at 23:00
Using the following steps worked for me (these were all done locally on my mac -so no sharing of content on online tools was necessary):
I made a screen recording of my Android emulator (phone) using QuickTime Player on Mac and saved that in a file
recording.mov
Then converted the .mov to a .gif using the following command from my Terminal (needs ffmpeg, gifsicle installed)
ffmpeg -i recording.mov -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif
I was then easily able to add a gif file of the video (
out.gif
) with not so large a filesize into my README.md directly on github.com
This is an old post but this helped me. Very straightforward - just drag and drop from finder mp4 file to Github ReadMe (Edit version) straight.
https://www.geeksforgeeks.org/how-to-add-videos-on-readme-md-file-in-a-github-repository/?id=discuss
You can just drag and drop the file into README.md where you want to add the video. GitHub will automatically convert it into video format.
Good News: It's very easy to embed locally video to GitHub README now (2024-05-23)!
1. Edit the README file on the GitHub repo
The edit page url likes
https://github.com/xumeng/ai-careers/edit/master/README.md
2. Drag the local video file to the edit panel
It will uploading the file automatically, then it will showing a video asset url likes https://github.com/xumeng/ai-careers/assets/2187660/7362e4b8-6318-4cfc-af63-b8921455e434
3. Preview and commit the changes, We're done!
You can Drag and Drop in Markdown File.
and If You are trying to embed Greater than 10MB then you have to upload somewhere and then follow the below code because Github Shows a warning it cannot be uploaded.
[Video_title](Your_UrlPath_For_Video)
-
1