Features & Documentation

Everything you need to know about VideoComposer's capabilities and how to get started.

Key Features

Background Video

Load any video as your composition background. Upload your own video or use our demo videos to get started quickly.

Multiple Video Overlays

Add unlimited video overlays on top of your background. Each overlay can be independently controlled and positioned.

Drag & Drop Positioning

Easily position your video overlays anywhere on the canvas with intuitive drag and drop controls.

Resizable Overlays

Resize any video overlay to fit your composition perfectly. Adjust dimensions by dragging the resize handle.

Transparency Control

Adjust the transparency of each video overlay independently to create blended effects and see through to layers below.

Individual Playback Controls

Control each video independently with play/pause and mute/unmute buttons. Create dynamic compositions with precise control.

Promote to Background

Instantly promote any overlay video to become the main background, swapping positions for flexible composition adjustments.

Online Video Support

Add videos from online sources including direct video URLs and YouTube videos to both background and overlays.

Publish Mode

Switch to a clean presentation view that hides all editing controls while maintaining your composition layout. Perfect for presentations and displays.

Password Protection

Optionally secure your publish mode with password protection to prevent unauthorized editing of your video composition.

User Guide

Getting Started

Load a Background Video

Start by loading a background video for your composition. You have three options:

Click "Upload Background" to upload your own video file
Click "Add Online Video" to use a video from the web or YouTube
Click "Use Demo Background" to use our pre-loaded demo video

Add Video Overlays

Add one or more video overlays to your composition:

Click "Add Video Overlay" to upload your own video as an overlay
Click "Add Online Overlay" to add a video from the web or YouTube
Click "Add Demo Overlay" to add a pre-loaded demo video as an overlay
You can add multiple overlays to create complex compositions

Working with Online Videos

Adding Direct Video URLs

Add videos hosted online directly to your composition:

Click "Add Online Video" or "Add Online Overlay"
Select "Direct Video URL" option
Enter the URL to a video file (MP4, WebM, etc.)
Click "Add Video" to add it to your composition

Adding YouTube Videos

Add YouTube videos to your composition:

Click "Add Online Video" or "Add Online Overlay"
Select "YouTube" option
Enter the YouTube video URL (watch or share URL)
Click "Add Video" to add it to your composition
YouTube videos support the same controls as regular videos

Working with Video Overlays

Moving Overlays

Position your video overlays anywhere on the canvas:

Hover over a video overlay to reveal its controls
Drag the overlay by its top bar (where it says "Drag Video Overlay")
The overlay will follow your mouse movement
Release to place the overlay in its new position

Resizing Overlays

Adjust the size of your video overlays:

Locate the resize handle in the bottom-right corner of any overlay
Click and drag this handle to resize the overlay
Drag outward to make the overlay larger
Drag inward to make the overlay smaller

Adjusting Transparency

Control the transparency of each video overlay:

Hover over a video overlay to reveal its controls
Click the Layers icon in the top-right corner
Use the slider to adjust transparency from 0% to 100%
Lower values make the overlay more transparent
Higher values make the overlay more opaque

Playback Controls

Control video playback for each overlay:

Hover over a video overlay to reveal its controls
Use the Play/Pause button at the bottom-left to control playback
Use the Mute/Unmute button at the bottom-right to control audio
Each overlay can be controlled independently

Removing Overlays

Remove video overlays you no longer need:

Hover over a video overlay to reveal its controls
Click the X button in the top-right corner
The overlay will be immediately removed from your composition

Promoting to Background

Turn any overlay into the main background video:

Hover over a video overlay to reveal its controls
Click the Arrow Up icon in the top control bar
The overlay will become the new background video
The previous background video will take the place of the promoted overlay

Tips & Tricks

Creating Picture-in-Picture Effects

Position smaller video overlays in the corners of your background video and adjust their size to create professional picture-in-picture effects.

Blending Videos with Transparency

Overlap multiple video overlays and adjust their transparency to create unique blending effects where multiple videos are visible simultaneously.

Creating Video Walls

Arrange multiple video overlays in a grid pattern with consistent sizing to create a video wall effect with multiple streams playing simultaneously.

Mixing Online and Local Videos

Combine YouTube videos with your own uploaded content to create rich compositions that blend professional content with your personal videos.

Using Publish Mode

Entering Publish Mode

Switch to a clean presentation view:

Set up your background video and overlays as desired
Click the "Publish Mode" button at the bottom of the screen
Choose whether to set a password or skip this step
Your composition will enter full-screen presentation mode

Password Protection

Secure your presentation with a password:

When entering Publish Mode, you'll be prompted to set a password
Create and confirm your password, or leave blank to skip
If a password is set, it will be required to exit Publish Mode
This prevents unauthorized users from editing your composition

Exiting Publish Mode

Return to the editor when needed:

Click the small gear icon in the top-right corner
If you set a password, enter it when prompted
If no password was set, you'll return directly to the editor
Your composition layout will be preserved exactly as it was

Interacting with Videos in Publish Mode

Control videos during presentation:

Hover over any video overlay to reveal playback controls
Use the play/pause and mute/unmute buttons as needed
All videos maintain their functionality in Publish Mode
Editing controls (resize, move, etc.) are disabled for a clean presentation

Installation Guide

Prerequisites

Node.js and npm

Make sure you have Node.js (v14.0.0 or later) and npm installed on your system.

# Check your Node.js version
node --version

# Check your npm version
npm --version

Git

You'll need Git to clone the repository.

# Check your Git version
git --version

Step-by-Step Installation

Clone the Repository

Open your terminal and clone the VideoComposer repository:

git clone https://github.com/your-username/video-composer.git
cd video-composer

Install Dependencies

Install all required dependencies:

npm install

Run the Development Server

Start the development server:

npm run dev

This will start the application on http://localhost:3000

Build for Production (Optional)

If you want to create a production build:

npm run build
npm start

Troubleshooting

Dependency Issues

If you encounter dependency issues, try:

npm clean-install

Port Already in Use

If port 3000 is already in use, you can specify a different port:

npm run dev -- -p 3001

Video Playback Issues

If you experience video playback issues, ensure your browser supports the video formats you're using. For best compatibility, use MP4 videos with H.264 encoding.

YouTube Embedding Issues

If YouTube videos aren't playing correctly, make sure your browser isn't blocking third-party cookies or scripts. Some content protection features may prevent embedding on certain videos.

Ready to Start Creating?

Jump into the video composer and start building your own dynamic video compositions.