blog/docs/superpowers/specs/2026-03-31-video-component-design.md

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

<Video src="/posts/rts.mp4" />
<Video src="/posts/rts.mp4" caption="My failed RTS attempt" />