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?
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.
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:
https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg
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:
https://i.imgur.com/Ot5DWAW.png
Code:
[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.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
https://i.imgur.com/7YTMFQp.png
Code
[![Little red riding hood](http://i.imgur.com/7YTMFQp.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?
[![Everything Is AWESOME](//img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](//www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
http
or https
on GitHub e.g: github.com/dwyl/remote-working where the video image and link work...
0.jpg
with hqdefault.jpg
or maxresdefault.jpg
. img.youtube.com/vi/StTqXEQ2l-Y/0.jpg img.youtube.com/vi/StTqXEQ2l-Y/hqdefault.jpg img.youtube.com/vi/StTqXEQ2l-Y/maxresdefault.jpg
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
I created https://yt-embed.herokuapp.com/ to simplify this. The usage is direct, from the examples above:
[![Everything Is AWESOME](https://yt-embed.herokuapp.com/embed?v=StTqXEQ2l-Y)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
https://i.stack.imgur.com/nvyUR.png
Just make a call to: https://yt-embed.herokuapp.com/embed?v=[video_id] as the image instead of https://img.youtube.com/vi/.
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
https://www.youtube.com/watch?v=5yLzZikS15k
then the thumbnail is: https://img.youtube.com/vi/5yLzZikS15k/0.jpg
https://img.youtube.com/vi/5yLzZikS15k/0.jpg
Following this logic, the code below produces flawless results:
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:
https://i.stack.imgur.com/iEj3w.png
https://img.youtube.com/vi/ID_OF_VIDEO/0.jpg
and the API for forming image links is explained in detail in this answer: stackoverflow.com/a/2068371/55478
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
https://i.stack.imgur.com/IK0mk.png
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)
https://youtube-md.vercel.app/dQw4w9WgXcQ/640/360
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 :).
https://i.stack.imgur.com/RrczT.gif
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.
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)
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>
You can try the following:
<iframe width="500" height="300" src="https://www.youtube.com/embed/<VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
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.
Success story sharing