# Fixed Video Format (9:16)

> Fixed 1080x1920 pixel video format with percentage-based positioning. Use this when laying out video compositions, positioning elements on the canvas, or calculating dimensions. All videos render at exactly 9:16 aspect ratio for TikTok/Instagram Reels.

- Skill: `diegosouzapw/fixed-video-format-9-16` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/fixed-video-format-9-16`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/fixed-video-format-9-16/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/fixed-video-format-9-16

---


# Fixed Video Format (9:16)

This Skill provides Claude Code with specific guidance on how it should handle the fixed 9:16 video format.

## When to use this skill:

- Positioning elements in any video composition
- Calculating element dimensions and coordinates
- Using VIDEO_CONFIG.width and VIDEO_CONFIG.height
- Defining safe zones for platform UI overlays
- Creating layouts optimized for vertical viewing
- Testing compositions in Remotion Studio preview

## Instructions

- **Fixed Dimensions**: All videos render at exactly 1080x1920 pixels (9:16 portrait); no responsive design needed
- **VIDEO_CONFIG Constants**: Use `VIDEO_CONFIG` from `src/lib/theme.ts` for width/height values
- **Percentage-Based Layout**: Position elements using percentages of VIDEO_CONFIG dimensions for maintainability
- **TikTok Optimization**: Format optimized for TikTok/Instagram Reels vertical viewing
- **Safe Zones**: Keep important content within central 90% to account for platform UI overlays
- **Consistent Aspect Ratio**: All compositions must maintain 9:16 aspect ratio; test in Remotion Studio preview

**Examples:**
```typescript
// Good: Use VIDEO_CONFIG, percentage-based positioning
import { VIDEO_CONFIG } from '@/lib/theme';

export const BookCover: React.FC = () => (
  <img
    src={coverUrl}
    style={{
      position: 'absolute',
      top: VIDEO_CONFIG.height * 0.15, // 15% from top
      left: VIDEO_CONFIG.width * 0.1,  // 10% from left
      width: VIDEO_CONFIG.width * 0.8,  // 80% width
      height: VIDEO_CONFIG.width * 0.8 * 1.5, // Maintain book aspect ratio
    }}
  />
);

// Bad: Hardcoded pixels, no VIDEO_CONFIG reference
<img
  style={{
    position: 'absolute',
    top: 300,
    left: 100,
    width: 800,
  }}
/>
```