283
votes

Is it possible to embed a flash video into README.md on GitHub? It isn't showing up: https://github.com/mattdipasquale/PicSciP

9

9 Answers

183
votes

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.

image and video

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 a README 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)

https://i0.wp.com/user-images.githubusercontent.com/22751162/101841526-ebf6ff00-3afa-11eb-965d-5ce11efdb9f8.png?ssl=1


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.

290
votes

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.imgur.com/vKb2F1B.png)](https://youtu.be/vt5fpE0bzSY)

Result:

Watch the video

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 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:

Watch the video

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 share button and copy the markdown snippet.

Example:

[![asciicast](https://asciinema.org/a/113463.png)](https://asciinema.org/a/113463)

Result:

asciicast

127
votes

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:

Demo CountPages alpha

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.

28
votes

For simple animations you can use an animated gif. I'm using one in this README file for instance.

14
votes

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:

Preview of GitHub's notice on video support

Perhaps, in the future, we can slowly nudge GitHub to eventually extend this native feature to READMEs as well.

10
votes

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.

5
votes

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.

1
votes

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)
0
votes

It is old post and TLDR of first solution:

  1. I just opened "edit" my Readme.md
  2. Drag and drop video inside readme edit section.
  3. Wait for it to upload and give you the URL something like https://user-images.githubusercontent.com/...
  4. 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.