How to embed a video into GitHub README.md?

by

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

More Related Contents:

  1. differences between using wmode=”transparent”, “opaque”, or “window” for an embedded object on a webpage
  2. How can I embed a YouTube video on GitHub wiki pages?
  3. How to add images to README.md on GitHub?
  4. Flash CS4 refuses to let go
  5. How to embed fonts in HTML?
  6. How to embed a SWF file in an HTML page?
  7. Can someone post a well formed crossdomain.xml sample?
  8. Convert MySQL schema to Github Wiki?
  9. How to add color to GitHub’s README.md file
  10. GitHub relative link in Markdown file
  11. How to show math equations in general github’s markdown(not github’s blog)
  12. Custom css file for readme.md in a Github repo
  13. How do I center an image in the README.md file on GitHub?
  14. How do you decompile a swf file [closed]
  15. How to render multiple columns with Markdown in GitHub README?
  16. Is there a command line utility for rendering GitHub flavored Markdown?
  17. Latex rendering in README.md on Github
  18. StackTrace in Flash / ActionScript 3.0
  19. How to escape a pipe char in a code statement in a markdown table?
  20. Adobe AIR to execute program
  21. Flash upload image resize client side
  22. html5 vs flash – full comparison chart anywhere? [closed]
  23. Inverting rotation in 3D, to make an object always face the camera?
  24. Can Flash action script read and write local file system?
  25. What is the easiest FLV player for embedding video on a website? [closed]
  26. How to fix closure problem in ActionScript 3 (AS3)
  27. Git: Could not resolve host github.com error while cloning remote repository in git
  28. How to work on personal GitHub repo from office computer whose SSH key is already added to a work related GitHub account?
  29. Can deleted .git be restored?
  30. git clone hangs forever on github

Leave a Comment