Side-by-Side Video Maker Place two videos side by side in a single frame.

🎬

Side-by-Side Video

Place two videos side by side in a single frame.

Upload Videos

Upload two video files to place side by side.

Configure Layout

Choose horizontal or vertical split layout.

Create & Download

Click Create and download your side-by-side video.

Loading tool...

What Is Side-by-Side Video?

The Side-by-Side Video Maker is a free browser-based tool that places two videos next to each other in a single frame. Choose between horizontal (left-right) or vertical (top-bottom) split layouts. It's perfect for video comparisons, before-and-after demonstrations, multi-angle views, and reaction content. Both videos play simultaneously and are drawn onto a combined Canvas. Audio from both sources is mixed together with adjustable volumes. The output is a single video file containing both views. All processing happens locally in your browser — no files are uploaded.

Why Use Side-by-Side Video?

Create split-screen layouts with any two videos
Horizontal or vertical split options
Mixed audio from both sources
No uploads — private processing

Common Use Cases

Comparisons

Compare before/after results, product versions, or quality differences.

Multi-Angle Views

Show the same event from two different camera angles simultaneously.

Tutorials

Display reference material alongside your demonstration.

Reactions

Place reaction footage next to the original content.

Technical Guide

The Side-by-Side tool loads two videos into HTML5 Video elements. A Canvas is created at combined dimensions — for horizontal layout, the width is doubled; for vertical, the height is doubled. During processing, requestAnimationFrame draws both video frames side by side on the canvas each frame. The left/top video is drawn at (0,0) and the right/bottom at (width,0) or (0,height). Both videos are scaled to fit their half of the canvas using drawImage() with destination sizing. Audio from both videos is captured via Web Audio API createMediaElementSource() nodes, mixed through a channel merger or GainNodes, and combined with the canvas stream for MediaRecorder output. The output duration matches the shorter of the two videos.

Tips & Best Practices

1
Videos with similar aspect ratios produce the most balanced layouts
2
Horizontal split works best for widescreen videos, vertical for portrait
3
Adjust audio levels so one source doesn't overpower the other
4
Both videos should be similar in length for synchronized playback

Related Tools

Video Cropper

Crop videos to remove unwanted areas and change aspect ratios.

🎬 Video Tools

Video Resizer

Resize videos to any resolution or dimension in your browser.

🎬 Video Tools

Picture-in-Picture Video

Create picture-in-picture videos with one video overlaid on another.

🎬 Video Tools

Video Merger

Merge multiple video clips into a single video file in your browser.

🎬 Video Tools

Frequently Asked Questions

Q Can I use different format videos?

Yes, the two videos can be different formats as long as your browser supports both.

Q What if the videos are different lengths?

The output matches the shorter video's duration. The longer video is cut to fit.

Q Is audio from both videos included?

Yes, audio from both videos is mixed with adjustable volume levels for each.

Q Is the side-by-side video tool private?

Yes. All processing happens in your browser — no files are uploaded anywhere.

Q Can I add more than two videos?

This tool supports two videos. For grid layouts with more videos, you'd need video editing software.

About This Tool

Side-by-Side Video is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.