Resizing a video follows a five-stage plan: confirm the source is locally decodable, decide the target width and height, choose between Fit and Stretch modes, run the encode inside your browser tab, and verify the downloaded WebM before you use it. The Video Resizer tool executes that plan in real time using the browser's built-in video decoder and MediaRecorder, so nothing is uploaded to a server and nothing depends on a third-party media library. Because the encode happens at up to 30 frames per second on a canvas, processing normally takes about as long as the video itself; this is not an instant metadata swap. Planning each stage in advance helps you avoid the two most common mistakes — choosing the wrong mode and targeting odd dimensions that get rounded down — and prevents the kind of distortion that comes from treating a 16:9 clip as if it were 4:3. The plan below assumes you have one short local video (MP4, WebM, MOV, M4V, or Ogg, up to 500 MiB and five minutes) and a target size in mind, and it walks through each step with concrete numbers so you can match the plan to your own file. For a separate walkthrough of the same workflow that you can keep open in a second window, see Document the Steps to Resize a Video Locally.
Plan a Resize in Four Phases
You can think of the resize workflow as four planning phases that must happen before you press the resize button. Skipping any one of them is the most common reason a result looks wrong, has the wrong ratio, or fails visibly in the browser. The phases are not specific to this site — they describe what a sensible resize workflow has to settle on no matter which encoder you choose, and they exist because each phase locks in a decision the next phase cannot undo.
- Phase 1 — Source audit. Confirm the file opens in your browser, is within the supported size and duration limits, and has a pixel area no larger than 3840 × 2160.
- Phase 2 — Target dimensions. Pick a maximum width and a maximum height that match the platform or device you are delivering to, and decide whether you want a bounding box or an exact frame.
- Phase 3 — Mode choice. Match the mode to the plan: Fit for aspect-preserving delivery, Stretch only when distortion is acceptable.
- Phase 4 — Verification. After encoding, open the WebM and confirm dimensions, duration, and visual fidelity before sharing.
Treating each phase as a separate checklist item keeps the workflow honest. A common failure pattern is to combine Phases 2 and 3 — typing in 1080 × 1080 without deciding whether you are filling the box or fitting inside it — and then being surprised when the result is squashed.
Check the Source File Before You Resize
The Video Resizer tool accepts five file formats — MP4, WebM, MOV, M4V, and Ogg — and imposes three hard caps that determine whether the planning can continue at all. The source must be no larger than 500 MiB, no longer than five minutes, and no greater than 3840 × 2160 pixels in area, with no individual side exceeding 4096 pixels. Each of those limits is enforced by the browser's own decoder, which is why you should pick a short clip rather than a multi-gigabyte master file for this workflow.
Once you choose the file, the browser reads its metadata inside your tab and reports the actual width and height. Note those numbers — they are the basis for every planning decision that follows, including the worked example later in this article. If the metadata reports an unsupported codec, the tool fails visibly instead of producing a misleading download, which is itself a useful planning signal: it tells you to re-export the clip in a different container before you attempt to resize rather than discovering the problem after a wasted encode.
Two other source properties are worth confirming before you commit. First, the duration: anything past the five-minute cap will be rejected during the real-time encode, so check it early. Second, the pixel area: a 4096-pixel-wide still image will be rejected even if it is short, because the browser decoder cannot stage frames that large for canvas drawing.
Set Target Dimensions and Pick Fit or Stretch
The second planning stage is where the most irreversible decisions live, so it deserves a concrete calculation. Each target dimension must be a whole number from 2 to 1920 pixels, and odd values are rounded down to the nearest even number by the encoder for codec safety. Most browser video encoders are more reliable with even pixel sizes, so a request for 801 × 601 becomes 800 × 600 internally; this matters when you are trying to hit a specific platform spec to the pixel.
Worked Fit calculation. Suppose the source is 1920 × 1080 and you want a bounding box of 800 × 600 — a common size for a portrait-oriented post or a thumbnail sequence. Fit mode picks the smaller of the two scale factors:
width-scale = 800 / 1920 = 0.4167 height-scale = 600 / 1080 = 0.5556 fit-scale = min(0.4167, 0.5556) = 0.4167
Applying that scale: 1920 × 0.4167 ≈ 800 and 1080 × 0.4167 ≈ 450. The output is therefore 800 × 450, which preserves the 16:9 ratio (450 / 800 = 0.5625, matching 1080 / 1920). Black bars appear above and below to fill the remaining 150 pixels of the 600-pixel box, split evenly as 75 pixels top and 75 pixels bottom. If you need a tightly filled 800 × 600 instead, switch to Stretch mode and accept the change in aspect ratio.
Fit and Stretch produce visibly different results on the same source, and the table below maps each mode to the situations where it is the better plan.
| Criterion | Fit (aspect-preserving) | Stretch (exact dimensions) |
|---|---|---|
| Aspect ratio | Preserves source aspect ratio; never crops | Uses requested width and height independently |
| Output dimensions | Smaller of the two scaled sizes, may leave padding bars | Exactly the requested width and height (rounded to even) |
| Distortion risk | None — picture keeps its true proportions | Possible — picture stretches or squashes to fit |
| Best use case | Social posts where platform ratio matters | Filling a fixed-size frame where distortion is acceptable |
| Typical inputs | 16:9 or 4:3 source into a same-direction box | Square 1:1 source into a landscape or portrait box |
Resize the Video in Your Browser
Once the planning phases are settled, the resize itself is mechanical. The how-to below uses the Video Resizer tool, which is built around the browser's HTMLCanvasElement captureStream API and the MediaRecorder API as described in the MDN entries on canvas captureStream and MediaRecorder.
- Open the Video Resizer and choose one supported local video; wait for the browser metadata to populate so you can see the actual width, height, and duration.
- Enter the maximum width and maximum height you planned, keeping each value as a whole number from 2 to 1920 pixels and preferring even values to avoid the one-pixel rounding.
- Select Fit when you planned for a bounding box with preserved aspect ratio, or Stretch when you planned for exact dimensions and accept distortion.
- Select Resize video, leave the tab open and visible, and wait while the canvas captures frames at up to 30 frames per second and the MediaRecorder encodes a WebM in real time.
- When the recording stops, save the downloadable WebM to your device and keep the file alongside the source for verification.
The encode is a real-time re-encode, not a metadata-only dimension change: the browser decodes the source, draws every frame onto a resized canvas at 30 fps, attaches any browser-exposed audio tracks, and writes the captured canvas to a WebM container using whatever VP9 or VP8 codec configuration MediaRecorder selects on the current tab. That is also why quality, frame timing, color metadata, and file size will differ from the source — they are outputs of the re-encode, not preserved attributes of the original.
Verify the Output Before You Use It
The final planning phase is verification, and it is the phase most readers skip. Open the downloaded WebM in the same browser or in any modern video player and confirm four things: the actual dimensions match what you requested (or the rounded-down even values if you typed odd numbers), the duration matches the source, the visual fidelity is acceptable for your use case, and any audio tracks are present in the right layout. If any of those four checks fails, do not share the file — re-plan with different dimensions, switch between Fit and Stretch, or fall back to a desktop encoder.
You can compare the source and the result side by side using the same browser tab. A quick sanity check is to play both files and watch the first and last frame; if the first frame matches and the duration matches, the geometry part of the plan worked. For a deeper check on long or commercial footage, hand the WebM to a dedicated desktop encoder where you can inspect every frame against the source.
Two tool behaviors make verification easier. First, the shared audited Matroska duration writer patches a finite duration into the WebM header so players do not treat the file as infinitely long. Second, an empty recorder output is rejected instead of being downloaded, so you never end up with a zero-byte file that pretends to be a successful resize.
When a Desktop Encoder Is the Better Choice
The browser-based Video Resizer is deliberately scoped to short clips and quick planning workflows. For frame-accurate delivery, color-managed mastering, required MP4 output, exact bitrate control, long footage, or any project where you need to preserve subtitles or multiple audio tracks, use a dedicated desktop encoder instead. The browser's MediaRecorder does not promise professional mastering and will not bypass DRM on protected media — it works only with media you own or have permission to edit.
The same logic applies to upscaling. The tool does not invent detail that was not in the source; it redraws the existing pixels at a different resolution. If you load a 640 × 360 clip and ask for 1920 × 1080, you get a larger frame with the same information spread more thinly, not a sharper picture. Planning honestly about what resizing can and cannot do is part of the workflow, and it is what separates a useful resized file from a file that simply looks worse at a larger size.
Finally, eight independent geometry fixtures cover landscape, portrait, square, same-ratio, bounding-box, stretch, and odd-dimension cases, so the dimensions you plan with above are tested ranges rather than untested guesses. Plan within those ranges, run the steps in order, and the result will match the planning.
If you're weighing options, How to Repeat a Video Resize and Get the Same Result covers this in detail.