How can I embed a YouTube video on GitHub wiki pages?

user_1000343 0
Viewed 226563

I am fairly new to markup (though it's extremely easy to pickup). I am working on a package and am trying to get the wiki pages looking nice as a help manual. I can insert a YouTube video link into the wiki page pretty easily but how do I embed a YouTube video. I know this may not be possible.

I have read you can use HTML tags so I tried embedding with HTML per this link as follows:

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg"
         type="application/x-shockwave-flash"
         wmode="transparent" width="425" height="350" />
</object>

And saved the page but nothing happened.

  1. Is it possible to embed a YouTube video on GitHub wiki pages?
  2. If so how?
embed video youtube markdown github
15 Answers

Markdown does not officially support video embeddings but you can embed raw HTML in it. I tested out with GitHub Pages and it works flawlessly.

  1. Go to the Video page on YouTube and click on the Share Button
  2. Choose Embed
  3. Copy and Paste the HTML snippet in your markdown

The snippet looks like: 

    <iframe width="560" height="315"
src="https://www.youtube.com/embed/MUQfKFzIOeU" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

PS: You can check out the live preview here

user_28061630
user_52856510

If you like HTML tags more than markdown + center alignment:

<div align="center">
  <a href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE"><img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT"></a>
</div>

user_76855500

Adding a link with the thumbnail, originally used by YouTube is a solution, that works. The thumbnail, used by YouTube is accessible the following way:

  • if the official video link is:
    • https://www.youtube.com/watch?v=5yLzZikS15k
  • then the thumbnail is:
    • https://img.youtube.com/vi/5yLzZikS15k/0.jpg

Following this logic, the code below produces flawless results:

<div align="left">
      <a href="https://www.youtube.com/watch?v=5yLzZikS15k">
         <img src="https://img.youtube.com/vi/5yLzZikS15k/0.jpg" style="width:100%;">
      </a>
</div>

user_54486260

Center align Video with Thumbnail and Link:

<div align="center">
      <a href="https://www.youtube.com/watch?v=StTqXEQ2l-Y">
     <img 
      src="https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg" 
      alt="Everything Is AWESOME" 
      style="width:100%;">
      </a>
    </div>

Result:

enter image description here

user_22521130

I wrote a Chrome browser extension, xhub, that allows you to embed YouTube videos (and other things, too) in GitHub pages.

Get it here. Then add something like this

A video:
```youtube-embed
{
   "width": "560",
   "height": "315",
   "src": "https://www.youtube.com/embed/dQw4w9WgXcQ",
   "title": "YouTube video player",
   "frameborder": "0",
   "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
   "allowfullscreen": true
}
```

to your markdown code. It gives you

enter image description here

user_3533370

I create an api which let you Do it! You can go to This website to generate it or use the api. This api also allows you to Set size too! docs

[![ALT](https://youtube-md.vercel.app/VIDEO-ID)](https://www.youtube.com/watch?v=VIDEO-ID)

Example:

[![Rick Astley - Never Gonna Give You Up (Official Music Video)](https://youtube-md.vercel.app/dQw4w9WgXcQ/640/360)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Rick Astley - Never Gonna Give You Up (Official Music Video)

user_148363680

In my case, as a trick I have encountered this issue by converting my screen recorded video into a gif using an online converter then I have added it to my markdown like so:

## Quick Overview of the project

![Functional Programming with Javascript using NASA API](./functionJsWithNasaAPI.gif)

The result was like this in the image below

Check this repo for a live preview of the example above. Hope this trick may help someone :).

Example of using a gif instead of using the unsupported video in the markdown

user_90396460

If you are trying to embed a video on a GitHub page all you need to do is go to the youtube video, click on share, copy the embed code (it should look like this)

<iframe width="560" height="315" src="https://www.youtube.com/embed/Z7PExj_v-ZU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

and paste it to your markdown page.

user_110884610

Actually not only youtube, using a little trick you can upload any videos, even directly from your computer. To do that,

  • you can create an Issue and simply drag the video file in it
  • I always prefer a thumbnail, to do so, snapshot a picture from the video and drag it like previous step
  • you have now two urls from the video and image
  • use the urls as: [![img_tag](https://image-url.png)](https://video-url.mp4)
  • e.g.,

im1

  • simply close the issue now (if you want)
user_59379780

Replace my YouTube video's ID with your YouTube video's ID

<a href="https://youtu.be/5xwHkLPgvtQ" title="Music Caster Video Demo">
  <p align="center">
    <img width="75%" src="https://img.youtube.com/vi/5xwHkLPgvtQ/maxresdefault.jpg" alt="Music Caster Video Demo Thumbnail"/>
  </p>
</a>


html {
  background: #2D2D2D;
}
<a href="https://youtu.be/5xwHkLPgvtQ" title="Music Caster Video Demo">
  <p align="center">
    <img width="75%" src="https://img.youtube.com/vi/5xwHkLPgvtQ/maxresdefault.jpg" alt="Music Caster Video Demo Thumbnail"/>
  </p>
</a>

Real World Example

user_77324340

You can try the following:

<iframe width="500" height="300" src="https://www.youtube.com/embed/<VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
user_103930670

Now (2021) you can user video on gitHub markdown easily. You just need paste plain video url on your markdown, and it will be converted in video.


To have a video on your markdown, just add the video url, some like this:

https://www.youtube.com/watch?v=G3Cytlicv8Y

You can see on this video about this new feature.

user_4482920
Related