Images, YouTube, and Instagram in an MDX post
A working reference post for adding optimized images and responsive social media embeds.
MDX keeps normal Markdown readable while allowing a small number of reusable components. This post is the copyable reference for the three media types used on this site.
Add a local image
Put the file in src/assets/, import it at the top of the post, and pass it to PostImage.
The component uses Astro’s image pipeline, so the build creates responsive image sizes instead of shipping the full source file to every screen.
Add a YouTube video
Copy the video ID from a URL like youtube.com/watch?v=jNQXAC9IVRw. Only the part after v= is needed.
The component uses YouTube’s privacy-enhanced domain and reserves a stable 16:9 space, preventing the page from jumping while the iframe loads.
Add an Instagram post
Pass the full URL of a public Instagram post, reel, or profile. The example below uses Instagram’s public profile; replace it with your own public permalink.
Example Instagram embed
Instagram owns the embed script. Browser privacy extensions or cookie restrictions may block it, so the component keeps a normal link as a fallback.
The rule for new components
Do not add a custom component for ordinary prose, headings, lists, links, or code blocks. Markdown already covers those. A component earns its place only when the content needs behavior or consistent responsive layout.