Use MOV or GIF file for demo in GitHub README.md

date
Aug 31, 2022
slug
use-mov-or-gif-in-github-readme
status
Published
tags
Tutorial
GitHub
Tool
summary
type
Post
I use MOV and GIF files to demonstrate demos for my projects. Here I will introduce how to generate and embed them into GitHub README.md.

GIF demo

  1. Record a video that you use to convert into GIF.
  1. Search “Gifski“ in App Store and click GET.
    1. notion image
      There are also other useful online tools I use for GIFs processing:
  1. Open or drag the video into Gifski.
  1. Configure the GIF being generated as you need.
    1. notion image
  1. Place the GIF in a demo folder of your project.
  1. In README.md mention the GIF.

    MOV demo

    1. Record a MOV file that you use for demo.
    1. Click on README.md file in GitHub.
    1. Click “Edit this file“ button.
      1. notion image
    1. Drag the MOV file into README.md edit section.
      1. notion image
    1. Wait for generating the URL of MOV file.
      1. notion image
    1. Preview and check the demo.
      1. notion image
    1. Commit changes.

    © Foy Wan 2022 - 2025