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

🎬

Picture-in-Picture Video

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

Upload Videos

Upload the main video and the overlay (PiP) video.

Position PiP

Choose the corner and size for the overlay video.

Create & Download

Click Create and download your PiP video.

Loading tool...

What Is Picture-in-Picture Video?

The Picture-in-Picture (PiP) Video Maker is a free browser-based tool that overlays one video on top of another, creating a picture-in-picture effect. Upload a main video and a smaller overlay video, then choose the position and size for the overlay. The overlay typically appears in a corner of the main video. It's perfect for reaction videos, gaming commentary, tutorials with webcam overlay, and multi-angle presentations. Both videos play simultaneously and are composited onto a single Canvas for recording. All processing happens locally in your browser.

Why Use Picture-in-Picture Video?

Create professional PiP layouts with any two videos
Customizable overlay position and size
No uploads — all processing on your device
No software installation or watermarks

Common Use Cases

Reaction Videos

Overlay your webcam reaction on the content you're reacting to.

Gaming Commentary

Add a facecam overlay to gameplay recordings.

Tutorial Videos

Show your webcam alongside screen recordings for tutorials.

Presentations

Display speaker video over presentation slides.

Technical Guide

The PiP Video Maker loads two video files into separate HTML5 Video elements. A Canvas is created at the main video's dimensions. During playback, requestAnimationFrame draws the main video as the full canvas background, then draws the overlay video at the specified position and size using drawImage() with destination coordinates. Both videos play simultaneously. Audio mixing uses Web Audio API — both video audio sources are connected through GainNodes to a MediaStreamDestination, allowing volume control for each. The combined canvas stream and mixed audio stream are fed to MediaRecorder. The overlay can have a border (drawn via strokeRect) and rounded corners (via clip path). Position presets calculate corner coordinates with configurable padding.

Tips & Best Practices

1
The overlay video is typically 20-30% of the main video size
2
Place the PiP window in a corner with minimal important content
3
Both videos should be similar in duration for best results
4
Adjust audio volumes so one track doesn't overpower the other

Related Tools

Video Text Overlay

Add text, titles, and captions to your videos.

🎬 Video Tools

Video Watermark

Add image or text watermarks to protect your video content.

🎬 Video Tools

Side-by-Side Video

Place two videos side by side in a single frame.

🎬 Video Tools

Video Merger

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

🎬 Video Tools

Frequently Asked Questions

Q Can I adjust the overlay size?

Yes, use the size slider to make the overlay larger or smaller relative to the main video.

Q What overlay positions are available?

Choose from corner presets (top-left, top-right, bottom-left, bottom-right) or use custom positioning.

Q Is audio from both videos included?

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

Q Is it private?

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

Q What if the videos are different lengths?

The output length matches the shorter video. The longer video is trimmed to fit.

About This Tool

Picture-in-Picture 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.