Rich Content in MDX (Videos, Photos, Code)

This site fully supports rich media and interactive components directly inside MDX posts, projects, and docs.

1. Responsive YouTube Embeds

Embed any YouTube video with the <YouTube /> component:

import YouTube from '../../components/YouTube.astro';

<YouTube id="dQw4w9WgXcQ" title="Sample YouTube Video" />

2. Photos (Remote URL & Local)

You can include remote images directly via standard Markdown or HTML:

![Mountain View](https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&auto=format&fit=crop&q=80)

Mountain View

Or local images placed in public/ (accessible at /filename.ext):

![Local Favicon](/favicon.svg)
Local Favicon

3. Responsive CodeBox with Copy

Use <CodeBox> for code snippets with titles and a copy button:

deploy.shbash
# Deploy site with high performance
npm run build
astro preview

4. Native HTML5 Video

HTML5 videos are styled responsively out of the box:

<video controls width="100%">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  Your browser does not support HTML video.
</video>