Vertical social
Make a 9:16 film for a phone feed from one page, with the layout rules and the safe area that vertical needs.
At the end of this page you have a 9:16 filmA film is the mp4 file that the renderer makes from one page. of 1080 × 1920 from the same page that makes the 16:9 film. The layout fits the tall frame, and nothing is cropped.
You need a page with a duration meta. Read Aspect ratios for the contract. This page covers what vertical changes in the design.
What this film needs
A vertical film is read on a phone, once, in a feed. The colour-sting brief states the viewer as “people who see it once, muted or not, in a feed”. So the picture carries the message. The first frame shows the subject (first-frame), and the hook is in the first 3 s (hook-payoff).
The frame is tall and narrow. A 6 percent cap height is 6 percent of 1920, about 115 px, but the lines are short, so most headlines wrap to two or three lines. Plan the copy for the width, not for 16:9.
The spectacleThe spectacle is the second of the one big moment in a film, set by <meta name="spectacle" content="6.2">. keeps its rule: one big moment, with quiet before it. In 9:16, put the hero in the upper-middle third (safe-margin).
Steps
Start the film in 9:16
bin/vawe new teaser --from prompts/beat-sheet.md --length 12 --aspect 9:16The --aspect flag writes the ratio into brief.md and into the page aspect meta. A film that starts in 9:16 needs no override later. The list of templates is in Templates.
Lay out with the frame size
The renderer sets --vw and --vh on :root and data-aspect on <html>. Size with --vh and change with [data-aspect] selectors.
h1 { font-size: calc(var(--vh) * 0.11); }
[data-aspect="9:16"] h1 { left: 8%; top: 30%; }Never crop, and never lay out in fixed pixels for 16:9.
Draft in 9:16
bin/vawe dev films/teaser/page.html --aspect 9:16A draft of a page that is already 9:16 needs no flag. For a 16:9 page, the flag gives the draft in 9:16, and the output name gets -9x16, so the two aspects do not overwrite each other. A draft is half size, but the layout viewport is full size, so it lays out like the final.
Check the real boxes
bin/vawe still films/teaser/page.html --at 3 --aspect 9:16
bin/vawe critique films/teaser/page.htmlThe critique writes a phone sheet, the film at 360 px wide. Ask of each string: can I read it? The text-margin check reports text that reaches past the title-safe area. Read Critique and fix.
Ship one file for each aspect
bin/vawe ship films/teaser/page.html --aspect allall renders the five common aspects (16:9, 9:16, 1:1, 4:5, 4:3), one file each. To ship only the vertical film, pass --aspect 9:16. ship needs a fresh review and the ownerThe owner is the person who asked for the film and signs it off.’s approval first. Read Ship.
Pitfalls from the taste digest
- Safe area (
safe-margin). Margins are 6 to 8 percent. For social, keep key content out of the outer 10 to 12 percent. A headline near the bottom collides with a caption band that looks empty in the draft. - One action at the end (
cta-last-short). The end card is the shortest beat and carries one action.
Common mistakes
| What you see | Why | What to do |
|---|---|---|
| A headline touches the top edge | It sits in the outer margin | Move it inside 10 percent |
| The 16:9 layout looks lost in 9:16 | Fixed pixel sizes | Size with --vh and add a [data-aspect="9:16"] rule |
is not a W:H ratio of whole numbers | The value is 9/16 | Write 9:16 |
What to read next
Platforms
Aspect ratios
Text and fonts
Launch video
From the blogHTML video aspect ratio: 16:9, 9:16 and 1:1