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

Question

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.

Is it possible to embed a YouTube video on GitHub wiki pages?
If so how?

See also http://stackoverflow.com/questions/4279611/how-to-embed-a-video-into-github-readme-md?rq=1 — Brian Burns, Nov 17 '16 at 15:44

score 737 · Accepted Answer · edited Aug 12 '20 at 12:55

737

It's not possible to embed videos directly, but you can put an image which links to a YouTube video:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

For more information about Markdown look at this Markdown cheatsheet on GitHub.
For more information about Youtube image links look this question.

edited Aug 12 '20 at 12:55

Eduardo Santana

5,780
3
19
21

answered Apr 18 '13 at 09:35

MGA

7,575
1
14
10

3

The iframe does not work for wiki pages, only this solution currently works. – Tyler Rinker Mar 11 '14 at 15:24
Modifying your answer as [Mahmoud](https://stackoverflow.com/users/260229/mahmoud) suggested on [another answer](https://stackoverflow.com/a/29862696/7123660) may make sense to improve the quality of the thumbnail. – Benjamin Loison Sep 02 '22 at 10:45

nelsonic · Answer 2 · 2021-04-06T15:30:16.053

Complete Example

Expanding on @MGA's Answer

While it's not possible to embed a video in Markdown you can "fake it" by including a valid linked image in your markup file, using this format:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

Explanation of the Markdown

If this markup snippet looks complicated, break it down into two parts:

an image
![image alt text](https://example.com/link-to-image)
wrapped in a link
[link text](https://example.com/my-link "link title")

Example using Valid Markdown and YouTube Thumbnail:

We are sourcing the thumbnail image directly from YouTube and linking to the actual video, so when the person clicks the image/thumbnail they will be taken to the video.

Code:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

OR If you want to give readers a visual cue that the image/thumbnail is actually a playable video, take your own screenshot of the video in YouTube and use that as the thumbnail instead.

Example using Screenshot with Video Controls as Visual Cue:

Code:

[![Everything Is AWESOME](https://i.stack.imgur.com/q3ceS.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

Clear Advantages

While this requires a couple of extra steps (a) taking the screenshot of the video and (b) uploading it so you can use the image as your thumbnail it does have 3 clear advantages:

The person reading your markdown (or resulting html page) has a visual cue telling them they can watch the video (video controls encourage clicking)
You can chose a specific frame in the video to use as the thumbnail (thus making your content more engaging)
You can link to a specific time in the video from which play will start when the linked-image is clicked. (in our case from 35 seconds)

Taking and uploading a screenshot takes a few seconds but has a big payoff.

Works Everywhere!

Since this is standard markdown, it works everywhere. try it on GitHub, Reddit, Ghost, and here on Stack Overflow.

Vimeo

This approach also works with Vimeo videos

Example

Code

[![Little red riding hood](https://i.stack.imgur.com/XCRlR.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

Notes:

How to take screenshot: http://www.take-a-screenshot.org/ (all platforms)
Upload Thumbnail Image: Once you've taken your screenshot you can drag-and-drop it into imgur.com to upload and immediately use it as your thumbnail
YouTube thumbnail info: How do I get a YouTube video thumbnail from the YouTube API?

I recently found that I had to omit the http / https URL scheme from the URL to get this to work, i.e. `[![Everything Is AWESOME](//img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](//www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")` — Stephen Quan, Jul 22 '16 at 05:50
@StephenQuan which markdown parser/platform were you using? we use the code *with* the `http` or `https` on GitHub e.g: https://github.com/dwyl/remote-working where the video image and link work... — nelsonic, Sep 06 '16 at 11:23
You can switch between the image quality of the thumbnail by replacing the `0.jpg` with `hqdefault.jpg` or `maxresdefault.jpg`. https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg https://img.youtube.com/vi/StTqXEQ2l-Y/hqdefault.jpg https://img.youtube.com/vi/StTqXEQ2l-Y/maxresdefault.jpg — Mahmoud, Aug 31 '21 at 00:03

score 59 · Answer 3 · edited Jan 21 '19 at 23:38

59

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.

Go to the Video page on YouTube and click on the Share Button
Choose Embed
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

edited Jan 21 '19 at 23:38

rynop

50,086
26
101
112

answered Jan 16 '19 at 01:11

Daksh Shah

2,997
6
37
71

19

This iframe strategy looked promising. However, it does not work in [my repo's](https://github.com/AdamSHurwitz/Coinverse) READ.md file. – AdamHurwitz Dec 08 '19 at 18:31
1

This may not work on README.md's, but it definitely works in github pages. – Mordred Mar 01 '21 at 05:05
Doesn't seem to work inside Github Readme.md, with Vimeo videos at the moment. – MRule Oct 07 '21 at 13:44
I tried this in a PR comment and it also is not supported there either. – Taylor D. Edmiston Dec 07 '21 at 17:53
1

Does not work on GitHub Wiki. Gollum does not support that. – Dzintars Jan 12 '22 at 13:16
2

This is not Github Wiki Pages, which is what OP is talking about. Github Pages is HTML without restrictions, so it's obvious it supports iframe tags – Iuri Guilherme Feb 01 '23 at 21:03

score 17 · Answer 4 · answered Oct 30 '17 at 16:57

17

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>

answered Oct 30 '17 at 16:57

Ivan Berezanskiy

327
2
8

Vityata · Answer 5 · 2022-05-30T11:57:42.557

16

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>

edited May 30 '22 at 11:57

answered Jul 19 '20 at 13:34

Vityata

42,633
8
55
100

1

Very useful in GitHub Wiki, because the drag and drop of mp4 files does not create a video thumbnail (as of today) – Gabriel Jan 30 '23 at 12:44
This does not display the "play" button so it looks static and viewer doesn't know it's clickable/playable. – Nakilon Jul 07 '23 at 05:05

score 7 · Answer 6 · answered Feb 12 '20 at 10:30

7

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:

answered Feb 12 '20 at 10:30

Hitesh Sahu

41,955
17
205
154

This is a great answer because it is easy to automate! To that end, the template for that image link is `https://img.youtube.com/vi/ID_OF_VIDEO/0.jpg` and the API for forming image links is explained in detail in this answer: https://stackoverflow.com/a/2068371/55478 – Noah Sussman Feb 25 '20 at 19:46

score 5 · Answer 7 · answered Oct 07 '22 at 12:46

October 2022 Update

Why work so hard?

github.com allows dragging / dropping images & videos into Issues and PRs.

If you edit your README.md on github.com and drag/drop an MP4 into the page, you get an embedded video player with audio (which you do not get with a GIF).

There is a size limit... I think it's 100 MB for assets uploaded this way.

Huge Advantages

The MP4 is not in the .git repo so does not impact clone speed or local repo size
No other services involved (no YouTube, no 3rd part apps)
Audio (GIFs are great... but there is a reason we don't go to silent movies today)

Demo Time

https://github.com/huntharo/video-test

score 1 · Answer 8 · answered Jul 08 '21 at 04:59

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

score 0 · Answer 9 · answered Mar 25 '21 at 05:42

0

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.

answered Mar 25 '21 at 05:42

luciferchase

559
1
10
24

Can confirm this works on markdown renderers that support embedded video. – Matthew Muller Jul 17 '21 at 07:00
1

This doesn't work on regular GitHub README's, on GitHub itself. And it also doesn't work on GitHub wiki pages, on GitHub itself. Tested and tried with my own project. :-) jz – J.Z. May 15 '22 at 17:38

score 0 · Answer 10 · answered Sep 02 '21 at 09:25

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

simply close the issue now (if you want)

score -1 · Answer 11 · answered Mar 14 '21 at 11:01

-1

You can try the following:

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

answered Mar 14 '21 at 11:01

logbasex

1,688
1
16
22

score -2 · Answer 12 · answered Dec 30 '21 at 11:55

-2

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.

answered Dec 30 '21 at 11:55

Tiago Gouvêa

15,036
4
75
81

I watched the video you linked to, and yes you can embed a video file but it doesn't embed a link to an online YouTube video. At least, it did not work for me. (Note, one of the comments on the video says "It would be cool to have a similar integration with YouTube videos"). – Bill Jan 03 '22 at 19:23

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

12 Answers12

Complete Example

Explanation of the Markdown

Example using Valid Markdown and YouTube Thumbnail:

Code:

Example using Screenshot with Video Controls as Visual Cue:

Code:

Clear Advantages

Works Everywhere!

Vimeo

Example

Code

Notes:

October 2022 Update

Huge Advantages

Demo Time

Linked

Related