How to Embed a Video Into GitHub README.md?

GitHub README.md files are written in Markdown, which does not support direct video embedding. However, we can embed videos using the GitHub Repository and create links to YouTube videos with an embedded image that acts as a thumbnail. There are several approaches to embedding video into GitHub README.md files which are as follows:

Table of Content

  • Video from Github Repository
  • Embedding a YouTube video

Video from Github Repository

Step 1: Create a repository and upload a thumbnail and video in a folder.

Ensure the video file and a thumbnail image (e.g., thumbnail.jpg) are in your repository.

Repository structure

repository structure

Step 2: Open README.md file and Create a Link with Markdown.

Use Markdown to create an image link to the video file.

Syntax:

[![Watch the video](https://raw.githubusercontent.com/username/repository/branch/path/to/thumbnail.jpg)](https://raw.githubusercontent.com/username/repository/branch/path/to/video.mp4)

Step 3: Steps to follow for embedding video in readme.md

  • Replace username with your GitHub username.
  • Replace repository with your repository name.
  • Replace branch with the branch name (e.g., main).
  • Replace path/to/thumbnail.jpg with the actual path to the thumbnail image in the repository.
  • Replace path/to/video.mp4 with the actual path to the video file in the repository

Example:

[![Watch the video](https://raw.githubusercontent.com/yourusername/yourrepository/main/assets/thumbnail.jpg)](https://raw.githubusercontent.com/yourusername/yourrepository/main/assets/video.mp4)

Output

Embedding a YouTube video

Step 1: Create a repository and make a simple readme file.

Here we don’t have to upload video to the repository.

Step 2: Select a Video.

Choose a video that you want to Embed in Github README.md. You can use the YouTube video thumbnail.

Markdown Syntax: Use Markdown to create a link with the thumbnail image that directs to the YouTube video.

[![Video Title](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

Step 3: Steps to follow for embedding youtube video in Readme file.

  • Replace VIDEO_ID with the actual ID of the YouTube video. This ID is found in the video URL (e.g., https://www.youtube.com/watch?v=VIDEO_ID).
  • Use https://img.youtube.com/vi/VIDEO_ID/0.jpg to get the default thumbnail image from YouTube.

Example

[![Watch the video](https://img.youtube.com/vi/_5tFXJQIzi4/0.jpg)](https://www.youtube.com/watch?v=_5tFXJQIzi4)

Output

video thumbnail

This Markdown will display the YouTube thumbnail as an image. When clicked, it redirects to the YouTube video.