Cropping a video is different from resizing one. Resizing scales the entire picture down or up while keeping everything in frame, while cropping discards everything outside the rectangle you keep, changing the composition and often the aspect ratio along with it. Removing a black bar down one side, cutting a landscape recording down to a square for social media, or focusing in on one part of a wider shot are all crop operations a video cropper handles, not resize operations.
Everything runs locally. The browser's own video decoder reads the file, a canvas draws only the cropped region of each frame, and MediaRecorder captures that canvas in real time to produce the output, so a private clip never has to be uploaded anywhere just to run through a video cropper.
When to crop a video instead of resizing it
Crop when part of the frame is unwanted rather than the whole frame being the wrong size. A landscape recording that needs to become a square post, a shot with an unwanted edge or watermark along one side, or a wide scene where only a smaller section actually matters are all situations where keeping everything and shrinking it would be the wrong fix, since the unwanted content would simply get smaller rather than disappearing.
Resize instead of crop when the entire picture needs to be smaller or larger but every part of it still matters. Cropping and resizing solve genuinely different problems, and applying the wrong one either throws away content you wanted to keep or leaves in content you were trying to remove.
- Crop a landscape video down to a square or portrait frame for social media without shrinking the subject.
- Remove a black bar, a logo or an unwanted edge that sits along one side of the frame.
- Focus in on a smaller region of a wide shot rather than keeping the whole frame visible.
- Preview the exact crop rectangle on a still frame before committing to processing the whole video.
Setting the crop rectangle as a percentage of the frame
Position and size are both set as percentages of the original video's dimensions rather than fixed pixel values, since that keeps the same crop proportionally correct regardless of whether the source is a small preview clip or a large recording. A crop starting at 25 percent from the left and 25 percent wide, for example, always removes the outer quarters of the frame on that side no matter the video's actual resolution. Behind the sliders, each percentage is multiplied by the source width or height and rounded to a whole pixel, and the resulting x and y offsets are clamped so the rectangle can never extend past the far edge of the frame even if a slider is dragged to its maximum.
The preview renders a single frame from partway through the video using the current crop rectangle, so you can confirm the framing looks right before processing the entire clip, which is the slower, real time part of the operation.
Why this video cropper redraws every frame instead of trimming a container
Only the visible picture area changes. The audio track, where the browser is able to expose one from the source alongside the video, is carried through unmodified into the recorded output, and playback speed is untouched. Duration stays the same, since cropping removes area from each frame rather than removing any frames themselves.
The output resolution becomes whatever the cropped rectangle measures in pixels, which is normally smaller than the source in at least one dimension. If the crop happens to match the full frame exactly, the output is effectively the same size as the input, just re encoded as WebM. This is the direct way to cut video frame size down to a smaller rectangle without touching anything you want to keep inside it.
One canvas frame at a time, captured by MediaRecorder
Once loaded into a video element, the source frame dimensions are read directly from the browser's decoder, and the crop rectangle you set is converted from percentages into an exact pixel region of that source frame. A canvas sized to match the cropped rectangle is created, and on every animation frame the browser's drawImage method copies only that pixel region from the video onto the canvas.
The canvas is captured as a live stream through the captureStream method, combined with any audio track available from the source, and handed to a MediaRecorder instance that writes the encoded WebM output as the video plays in real time. No server is involved at any point in this pipeline.
How to crop a video
- 1
Add your video file
Drag a video file onto the drop area, or click it to browse. MP4, WebM and MOV are all accepted.
- 2
Set the crop rectangle
Adjust the position and size sliders to define the region of the frame you want to keep.
- 3
Preview the crop
Capture a still frame from the middle of the video to confirm the framing looks correct.
- 4
Crop and download
Press crop, wait for the real time recording to finish, then download the WebM result.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.drawImageThe browser API this cropper uses to copy only the selected region of each frame.developer.mozilla.org
- W3C: MediaStream Recording specificationThe specification defining how MediaRecorder captures a stream into an encoded file.w3.org
- WebM ProjectThe open format and codec suite that MediaRecorder writes the cropped video into.webmproject.org
Frequently asked questions
Common questions about the video cropper.
Resizing scales the entire frame smaller or larger while keeping every part of it visible. Cropping discards everything outside the rectangle you choose, so unwanted content at the edges disappears entirely rather than simply shrinking. Use whichever matches whether the problem is unwanted content or the wrong overall size.
Yes, when the browser is able to expose an audio track from the source video through its capture stream, that track is combined with the cropped video track and recorded together into the same WebM output.
MediaRecorder captures the canvas as the video plays in real time, frame by frame, since browsers do not offer a faster way to force a video element to decode every frame in sequence. A three minute clip takes roughly three minutes to crop, the same real time constraint every canvas based video tool on this site shares.
Yes. A preview button captures a single still frame from partway through the video using your current crop rectangle, so you can check the framing looks right before committing to the slower, real time processing step that produces the full cropped video.
The result downloads as WebM, since that is the format browsers can reliably encode through MediaRecorder without a licensed codec. If your workflow specifically needs MP4, convert the WebM output separately after downloading it.
Yes. This video cropper runs as a web page using your browser's own decoding, canvas drawing and recording features, so you can crop video online with no installation, no account and no software beyond the browser you already have open.
Yes. Setting the width and height percentages to match a target ratio, such as a square or a tall portrait frame, makes this a practical video aspect ratio cropper for turning a landscape recording into the shape a social platform expects.
Yes. Nudging the left, top, width and height sliders inward slightly is an effective way to trim video edges that carry a black bar, a watermark or a capture artifact along one side, without affecting the main subject in the middle of the frame.