Search code examples
githubmarkdown

How to resize an image with clickable link in README.md file?

I have been trying to add a link to one of the YouTube videos in the README.md file. So, first I took a screenshot of the video at a specific timestamp, put it in the local directory, and then used the following syntax:

[![ALT TEXT] (image/screenshot path)] (https://youtu.be/video_id  "video text")

But as the size of the screenshot is a little big (as big as my laptop screen), using the above syntax takes a lot of space in the output! I don't want that. I want to control the size of the screenshot/image. How can I do that?

I found different answers on adding an image with a clickable link; resize an image in readme; but I couldn't find any answer addressesing both the issues. (Sorry if such answer already exists)

Thanks a lot in advance :)

Solution

  • You can include raw HTML in your Markdown document, so just use standard HTML <a> and <img> tag with width and height atttributes:

    <a href="https://youtu.be/video_id" title="video text"><img src="path/to/img.png" width="xxx" height="yyy"></a>

    This will render correctly on github and elsewhere.