Explore our collection of 150+ developer tools, PDF editors, and image converters. Everything runs locally in your browser.
Ubify Media & Design Operations
UI/UX & DIGITAL MEDIA SPECIALISTS
About This Tool
Reformatting landscape 16:9 widescreen footage for vertical social platforms (9:16 for TikTok, Instagram Reels, and YouTube Shorts) or square posts (1:1) often results in awkward cropping that cuts out subjects or text overlays. This letterbox and pillarbox calculation studio determines the exact canvas dimensions, scaling percentages, and symmetrical border padding pixels needed to fit any source video into target display containers without cropping.
### Geometric Scaling & Padding Formulas
When fitting a source video into a destination bounding box while preserving the native aspect ratio: 1. **Source & Destination Aspect Ratios:** $$AR_{\text{src}} = \frac{W_{\text{src}}}{H_{\text{src}}}, \quad AR_{\text{dst}} = \frac{W_{\text{dst}}}{H_{\text{dst}}}$$ 2. **Dimension Scaling Factor ($S$):** $$S = \min\left(\frac{W_{\text{dst}}}{W_{\text{src}}}, \frac{H_{\text{dst}}}{H_{\text{src}}}\right)$$ 3. **Scaled Video Dimensions:** $$W_{\text{scaled}} = W_{\text{src}} \times S, \quad H_{\text{scaled}} = H_{\text{src}} \times S$$ 4. **Symmetrical Padding (Letterbox or Pillarbox):** $$\text{Pad}_{\text{horizontal}} = \frac{W_{\text{dst}} - W_{\text{scaled}}}{2}, \quad \text{Pad}_{\text{vertical}} = \frac{H_{\text{dst}} - H_{\text{scaled}}}{2}$$
### Worked Formatting Example
Converting standard 1080p landscape footage ($1920 \times 1080$, 16:9) to a vertical TikTok canvas ($1080 \times 1920$, 9:16): - **Source Aspect Ratio:** $1920 / 1080 \approx 1.778$ - **Target Aspect Ratio:** $1080 / 1920 = 0.5625$ - **Scaling Factor:** $\min(1080 / 1920, 1920 / 1080) = 1080 / 1920 = 0.5625$ - **Scaled Video:** $1080 \times 607.5$ pixels - **Vertical Padding:** $(1920 - 607.5) / 2 = 656.25$ pixels top and bottom - Symmetrical matte bars of ~656 pixels are added above and below the video, keeping the entire 16:9 picture visible in the vertical feed.
### Client-Side Processing Note
Canvas scaling, letterbox coordinate calculations, and video frame previews render strictly in your web browser using HTML5 Canvas. Video files remain entirely on your local device.
How to Use
- 1
Enter your source video resolution (e.g., 1920x1080) or load a video file directly.
- 2
Select your target aspect ratio: 9:16 Vertical, 1:1 Square, 4:5 Portrait, or 16:9 Landscape.
- 3
Choose a background fill style: solid black, custom brand color, or blurred edge replication.
- 4
Review the calculated scaling factor and padding dimensions, and export the fitted video.
Frequently Asked Questions
What is the difference between letterboxing and pillarboxing?
Letterboxing adds horizontal bars to the top and bottom of the frame (common when placing widescreen video in vertical containers), while pillarboxing adds vertical bars to the left and right (when placing 4:3 or vertical video in widescreen displays).
Does letterboxing reduce video resolution or image sharpness?
Letterboxing preserves original pixel aspect ratios and image sharpness without stretching or distorting pixels, though the scaled video occupies a smaller area of the total display container.
Are any video files uploaded to remote servers during aspect ratio padding?
No. All canvas transformations and letterbox rendering occur 100% locally in your browser memory.