Example: a note with a video and an image
This note exists to show how to put a YouTube video and an image into a note.
Open src/content/notes/example-note-with-media.md next to this page to see
the source.
A plain link
The simplest option — just a Markdown link:
Go Concurrency Patterns (Rob Pike)
An embedded video
Markdown accepts raw HTML, so an iframe works. Wrap it in <div class="video">
to make it scale with the page instead of overflowing on mobile:
Two details worth copying: the URL must be the /embed/VIDEO_ID form (not the
watch?v= one you get from the address bar), and youtube-nocookie.com is the
privacy-friendlier host. loading="lazy" keeps the video from slowing the
page’s first paint.
An image
Drop image files in public/images/, then reference them with a path starting
at /:
The alt text in the square brackets is what screen readers announce — worth writing properly rather than leaving empty.
Remote images work the same way, just with a full URL:
Both together
Nothing special about mixing them — it’s all just Markdown:
- A video for the explanation
- An image for the diagram you keep re-drawing on paper
- Regular prose around both
That’s the whole feature set.