31 lines
811 B
Markdown
31 lines
811 B
Markdown
# Video Component Design
|
|
|
|
## Summary
|
|
|
|
A reusable `<Video>` MDX component for embedding videos in blog posts with sensible defaults and optional caption.
|
|
|
|
## Component
|
|
|
|
**File:** `components/video.tsx`
|
|
|
|
**Props:**
|
|
- `src: string` — video file path (required)
|
|
- `caption?: string` — text displayed below video (optional)
|
|
|
|
**Video defaults:** `controls loop muted playsInline width="100%"`
|
|
|
|
**Styling:**
|
|
- Container: `rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm overflow-hidden shadow-md`
|
|
- Caption: small, muted, italic, centered
|
|
|
|
## Integration
|
|
|
|
Register `Video` in `page.tsx` MDXRemote `components` prop so it's available in all MDX posts without per-post imports.
|
|
|
|
## Usage in MDX
|
|
|
|
```mdx
|
|
<Video src="/posts/rts.mp4" />
|
|
<Video src="/posts/rts.mp4" caption="My failed RTS attempt" />
|
|
```
|