Github Video In Readme

Posted on  by admin

In this tutorial, we are going to learn about two different ways to add images to the GitHub README.md file.

First way

GitHub Profile ReadmeIf you are a web developer, app developer, or any kind of developer, it's important to have a great github portfolio. This is a new gith. 👉 Become A VS Code SuperHero Today: Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utmmedium=refe. 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).

  1. Open your GitHub repository and navigate to the images folder or the folder where your images are placed.
  1. Click on the image you need to add to your README.md file.
  2. Now, right-click on the image and select copy image address option.
  1. At final, open your README.md file and use below markdown syntax to add an image.

In the above syntax, you need to add your copied image address inside parenthesis ().

Second way

  1. Open your GitHub repository and click on the Issues tab.
  1. Now, click on the New Issue button and drag and drop your image inside Leave a comment box.
  1. Once the image is successfully uploaded you will get a markdown image syntax, just copy and paste it inside your README.md file.
03 Jul 2017

Github Video In Readme

Sometimes you may want to embed a youtube video into your repository’s README.md file. There are several methods such as using youtube’s auto-generated picture, a video screenshot, or an animated gif.

Use youtube’s preview picture

We can use youtube’s auto-generated picture for the video:

Template:

Example:

Which gives you this (using –b-9HrKK6w for VIDEO-ID). But this doesn’t feel like a video. We can do better.

Notice how it’s not completely certain if it’s an image or a video.

Use a video screenshot or .gif

To make it feel more like a video, we can use a video placeholder picture, screenshot, or .gif for our image. First create a directory to hold the screenshot or gif such as doc/screenshot_youtube.PNG then use this format.

Template:

Best Github Readme

Example:

This method gives us this. If you need a quick fix, this method “tricks” the user into thinking the video is on the README page with a picture. It’s not perfect but it works.

Readme

Good Github Readme

Similarly, you could use an animated .gif instead since they are rendered on Github’s readme.

Template:

Example:

This method is probably the most eye catching but it takes some work to get that .gif file.

Embed Video In Github Readme

Good luck!