Mastering Responsive Video Design in VideoFlow

Building a video pipeline usually starts with a single resolution in mind—typically 1920x1080. But the modern content landscape is fragmented. Your users want 16:9 for YouTube, 9:16 for TikTok, and 1:1 for Instagram. If you've ever tried to maintain three separate sets of absolute pixel coordinates for a single video template, you know it's a maintenance nightmare.

VideoFlow solves this by treating video as a resolution-agnostic document. By using a normalized coordinate system and relative sizing units, you can write a single script that renders perfectly across every aspect ratio.

The Problem with Absolute Pixels

In traditional video tools (and many programmatic alternatives), you position elements using pixels. If you place a logo at x: 100, y: 100 on a 1080p canvas, it looks fine. But if you switch to a 720p output, that logo is suddenly in a different relative position. If you switch to a vertical 1080x1920 frame, it might be off-screen or awkwardly hugging the corner.

Responsive video design requires a shift in mindset: stop thinking in pixels and start thinking in percentages.

Normalized Coordinates: The 0–1 Rule

In VideoFlow, the position property on every layer uses normalized values from 0.0 to 1.0.

• [0, 0] is the top-left corner.
• [1, 1] is the bottom-right corner.
• [0.5, 0.5] is the exact center.

When you define a title at position: [0.5, 0.2], it will always be horizontally centered and 20% down from the top, regardless of whether your video is a wide cinema screen or a narrow mobile frame. This is the foundation of building portable VideoJSON that works everywhere.

// This title stays centered and near the top regardless of resolution
const title = $.addText({
  text: 'STAY RESPONSIVE',
  position: [0.5, 0.2],
  color: '#FF5A1F',
  fontWeight: 800
});

Sizing with em Units

Positioning is only half the battle. If you define a font size in pixels, it will look massive on a 480p preview and tiny on a 4K export.

VideoFlow introduces a relative unit system where 1em = 1% of the project width.

By default, fontSize and shape width/height are measured in em. If your project is 1920 pixels wide, fontSize: 5 resolves to roughly 96 pixels. If you render the same project at 1080 pixels wide, it scales down to 54 pixels. The visual proportion between the text and the canvas remains identical.

Building an Aspect-Ratio-Agnostic Layout

Let's look at a real-world example: a lower-third graphic. In a responsive workflow, we want the graphic to sit at the bottom-left, maintaining a consistent margin from the edge.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({ width: 1080, height: 1920 }); // Vertical for mobile

// A background rectangle that scales with the width
const bar = $.addShape({
  width: 40,  // 40% of width
  height: 8,  // 8% of width
  fill: '#FF5A1F',
  position: [0.25, 0.85] // Positioned relative to the canvas
}, { shapeType: 'rectangle' });

const name = $.addText({
  text: 'JANE DOE',
  fontSize: 4,
  color: '#fff',
  position: [0.25, 0.85]
});

bar.fadeIn('500ms');
name.fadeIn('500ms');
$.wait('3s');

Because we used em for size and 0.85 for vertical position, this lower-third will stay in the "safe zone" whether you render it for a YouTube video or a Reels clip. You can even experiment with this right now in the VideoFlow Playground.

How VideoFlow Handles This

The magic happens during the compilation phase. When you call $.compile(), the @videoflow/core builder takes your normalized inputs and the project dimensions to produce a final VideoJSON.

This JSON is then consumed by our official renderers. Whether you are using @videoflow/renderer-browser for an in-tab export or @videoflow/renderer-server for a headless Node.js job, the math is handled consistently. This resolution-agnostic approach is one of the primary reasons developers choose VideoFlow over alternatives like FFmpeg—it abstracts the frame math so you can focus on the creative logic.

Summary

Responsive video design isn't just about making things "fit"; it's about creating a single source of truth for your visual identity that survives the jump between platforms. By mastering normalized coordinates and em units, you unlock a truly automated video pipeline.

Ready to build your first responsive template? Check out our Getting Started guide or dive into the source on GitHub.

For more on programmatic video architecture, read our deep dive on Why LLMs Need Portable VideoJSON.