Making Markdown Actually Work — Videos, Links, and Centred Things
July 13, 2026
Markdown is great until it isn't. The writing of the post, a bit easier as I pull from notes that I take on many subjects that catch my interest. Adding a YouTube video that doesn't look like it was embedded in 2009, a wee bit harder. Centring a URL under an image was not obvious at all for me.
I ran into all of these building vagor.one. None of them are complicated once you know the pattern. Here they are. I am also writing this more as a reference for me, but if struggle with these things, maybe other people do as well?
Making a YouTube video fill the width of the page
The default YouTube embed code gives you a fixed width and height:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>
That gives you a medium-sized video that sits in the middle of the page with nothing on the sides. Fine. Not great. On mobile it either overflows or shrinks to something unreadable.
The fix wraps the iframe in a div that handles the sizing automatically:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>
</div>
The padding-bottom: 56.25% is the magic number — it's the 16:9 ratio expressed as a percentage (9 ÷ 16 = 0.5625). The iframe stretches to fill whatever width the page gives it and maintains the correct proportions automatically. Works on every screen size. No black bars.
Replace VIDEO_ID with the ID from your YouTube URL — it's the string of characters after ?v= or after /embed/.
Embedding a YouTube Short
YouTube Shorts don't give you an embed button. They give you a URL that looks like this:
https://youtube.com/shorts/DscIW64PVYU
You can still embed it — you just have to convert the URL format manually. Replace youtube.com/shorts/ with www.youtube.com/embed/:
https://www.youtube.com/embed/DscIW64PVYU
Then use the same wrapper div — but with a different padding value. Shorts are vertical video (9:16) so the ratio flips:
<div style="position: relative; padding-bottom: 177.77%; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/DscIW64PVYU"
frameborder="0" allowfullscreen></iframe>
</div>
177.77% is the inverted ratio (16 ÷ 9 = 1.7777). That gives you a tall portrait-format embed that displays the Short correctly instead of letterboxing it into a widescreen box.
Starting a video at a specific timestamp
You have a 45-minute video and the interesting part starts at 21:16. You want the embed to start there.
Convert the timestamp to seconds — multiply the minutes by 60 and add the remaining seconds:
21 minutes × 60 = 1260
1260 + 16 seconds = 1276
Add ?start=1276 to the embed URL:
src="https://www.youtube.com/embed/VIDEO_ID?start=1276"
The video loads at 21:16. Nobody has to scrub through 21 minutes to get to the point.
Centring a link or caption under an image
Standard markdown has no centre alignment. This doesn't work:
[www.example.com](https://www.example.com)
The link just sits left-aligned under the image like everything else.
The fix uses an HTML div with inline styling — and the blank lines inside the div matter. Without them, the markdown inside never gets parsed and the link won't be clickable:
<div style="text-align: center;">
[www.example.com](https://www.example.com)
</div>
If you want to guarantee the link is always clickable regardless of how the markdown parser handles it, use a raw HTML anchor tag instead:
<div style="text-align: center;">
<a href="https://www.example.com">www.example.com</a>
</div>
Same result. The <a href> version doesn't depend on the markdown parser at all.
Centring an image itself
Same approach — wrap it in the div:
<div style="text-align: center;">
</div>
Blank lines inside the div. Always.
The blank lines rule
Every time something inside a div isn't rendering correctly, like a link that isn't clickable, or an image that isn't showing, the markdown is appearing as raw text, the first thing to check is whether the blank lines are there.
The markdown parser (remark, in this case) needs those blank lines to know it should parse what's inside the div as markdown rather than treat it as raw HTML. One missing blank line and everything inside becomes literal text.
This is the kind of thing that takes twenty minutes to figure out the first time and zero seconds every time after OR just use your AI of preference to help you get past this as quickly as possible!
That's it. Four patterns, all reusable. Paste them into a notes file somewhere accessible, you'll use them more than you think - I do almost every d4mn time I write a post :)