- Published on
How to embed YouTube Videos on Markdown pages
- Authors
- Name
- Khalil
- @Im_Khalil
There are multiple ways to embed a YouTube video in Markdown documents.
If the Markdown processor supports inline HTML, a YouTube player can be embedded using an iframe.
<iframe
width="640"
height="480"
src="https://www.youtube.com/embed/2Gg6Seob5Mg"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
>
</iframe>
Example :
If the Markdown processor does not support inline HTML, the only way to add a video is to add an image that links to the video. You can use your own image or the thumbnail generated by YouTube. YouTube provides the following thumbnails for each video:
URL | Description |
---|---|
https://img.youtube.com/vi/VIDEO_ID/0.jpg | Full-size thumbnail |
https://img.youtube.com/vi/VIDEO_ID/1.jpg, https://img.youtube.com/vi/VIDEO_ID/2.jpg, https://img.youtube.com/vi/VIDEO_ID/3.jpg | Small thumbnail images |
https://img.youtube.com/vi/VIDEO_ID/default.jpg | Default thumbnail image |
https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg | High-quality default thumbnail image |
https://img.youtube.com/vi/VIDEO_ID/mqdefault.jpg | Medium-quality default thumbnail image |
https://img.youtube.com/vi/VIDEO_ID/sddefault.jpg | Standard-definition default thumbnail image |
https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg | Maximum-resolution default thumbnail image |
Additionally, i.ytimg.com
can be used in place of img.youtube.com
win all of the URLs listed above.
Using one of the thumbnails, it is possible to add a link with a still from a video, e.g.:
[![IMAGE_ALT](https://img.youtube.com/vi/UmX4kyB2wfg/0.jpg)](https://www.youtube.com/watch?v=UmX4kyB2wfg)
Khalil Ganiga
Just another programmer.. This blog expresses my views of various technologies and scenarios I have come across in realtime.
Keep watching this space for more updates.