Quasilinear Thoughts

- A developer's log book.

Published on

How to embed YouTube Videos on Markdown pages

Authors

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:

URLDescription
https://img.youtube.com/vi/VIDEO_ID/0.jpgFull-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.jpgSmall thumbnail images
https://img.youtube.com/vi/VIDEO_ID/default.jpgDefault thumbnail image
https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpgHigh-quality default thumbnail image
https://img.youtube.com/vi/VIDEO_ID/mqdefault.jpgMedium-quality default thumbnail image
https://img.youtube.com/vi/VIDEO_ID/sddefault.jpgStandard-definition default thumbnail image
https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpgMaximum-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)

Comments are closed but If you want to respond, please send me a message over WhatsApp or facebook or tweet or send email.

Khalil

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.