API & SDK Documentation for Video Background Removal with AI

Positioning System

Position your video layers using anchors and offsets for pixel-perfect control:

⚓ Anchors

9 anchor points for easy positioning

📏 Offsets

Pixel offsets for fine-tuning position

📐 Size Modes

Multiple sizing options for different needs

Anchor Points

Use anchor points to position layers relative to the canvas:

TOP_LEFT	TOP_CENTER	TOP_RIGHT
CENTER_LEFT	CENTER	CENTER_RIGHT
BOTTOM_LEFT	BOTTOM_CENTER	BOTTOM_RIGHT

import { Anchor } from '@videobgremover/sdk'

// Basic positioning
comp.add(transparent).at(Anchor.CENTER)
comp.add(transparent).at(Anchor.TOP_LEFT)
comp.add(transparent).at(Anchor.BOTTOM_RIGHT)

// With pixel offsets
comp.add(transparent).at(Anchor.CENTER, 100, 50) // 100px right, 50px down
comp.add(transparent).at(Anchor.TOP_RIGHT, -20, 20) // 20px from edges

from videobgremover import Anchor

# Basic positioning
comp.add(transparent).at(Anchor.CENTER)
comp.add(transparent).at(Anchor.TOP_LEFT)
comp.add(transparent).at(Anchor.BOTTOM_RIGHT)

# With pixel offsets
comp.add(transparent).at(Anchor.CENTER, dx=100, dy=50)  # 100px right, 50px down
comp.add(transparent).at(Anchor.TOP_RIGHT, dx=-20, dy=20)  # 20px from edges

Size Modes

Choose how your videos are sized within the composition:

CONTAIN (Fit Within Canvas)

Scales video to fit within canvas while preserving aspect ratio:

import { SizeMode } from '@videobgremover/sdk'

// Fit transparent video within canvas (letterbox/pillarbox if needed)
comp.add(transparent).size(SizeMode.CONTAIN)

from videobgremover import SizeMode

# Fit transparent video within canvas (letterbox/pillarbox if needed)
comp.add(transparent).size(SizeMode.CONTAIN)

COVER (Fill Canvas)

Scales video to fill entire canvas, may crop edges:

// Fill entire canvas (crop if needed)
comp.add(transparent).size(SizeMode.COVER)

# Fill entire canvas (crop if needed)
comp.add(transparent).size(SizeMode.COVER)

PX (Exact Pixels)

Set exact pixel dimensions:

// Exact pixel dimensions
comp.add(transparent).size(SizeMode.PX, { width: 800, height: 600 })

# Exact pixel dimensions
comp.add(transparent).size(SizeMode.PX, width=800, height=600)

CANVAS_PERCENT (Percentage of Canvas)

Size relative to canvas dimensions:

// Square percentage (50% of both width and height)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { percent: 50 })

// Separate width/height percentages
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { width: 75, height: 25 })

// Width only (height maintains aspect ratio)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { width: 60 })

// Height only (width maintains aspect ratio)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { height: 40 })

# Square percentage (50% of both width and height)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, percent=50)

# Separate width/height percentages
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, width=75, height=25)

# Width only (height maintains aspect ratio)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, width=60)

# Height only (width maintains aspect ratio)
comp.add(transparent).size(SizeMode.CANVAS_PERCENT, height=40)

SCALE (Relative to Original)

Scale relative to the video’s original dimensions:

// Uniform scaling (150% of original size)
comp.add(transparent).size(SizeMode.SCALE, { scale: 1.5 })

// Non-uniform scaling (200% width, 80% height)
comp.add(transparent).size(SizeMode.SCALE, { width: 2.0, height: 0.8 })

// Width-only scaling (maintains aspect ratio)
comp.add(transparent).size(SizeMode.SCALE, { width: 1.2 })

// Height-only scaling (maintains aspect ratio)
comp.add(transparent).size(SizeMode.SCALE, { height: 0.7 })

# Uniform scaling (150% of original size)
comp.add(transparent).size(SizeMode.SCALE, scale=1.5)

# Non-uniform scaling (200% width, 80% height)
comp.add(transparent).size(SizeMode.SCALE, width=2.0, height=0.8)

# Width-only scaling (maintains aspect ratio)
comp.add(transparent).size(SizeMode.SCALE, width=1.2)

# Height-only scaling (maintains aspect ratio)
comp.add(transparent).size(SizeMode.SCALE, height=0.7)

FIT_WIDTH / FIT_HEIGHT

Scale to match specific canvas dimension:

// Scale to match canvas width (height adjusts to maintain aspect ratio)
comp.add(transparent).size(SizeMode.FIT_WIDTH)

// Scale to match canvas height (width adjusts to maintain aspect ratio)
comp.add(transparent).size(SizeMode.FIT_HEIGHT)

# Scale to match canvas width (height adjusts to maintain aspect ratio)
comp.add(transparent).size(SizeMode.FIT_WIDTH)

# Scale to match canvas height (width adjusts to maintain aspect ratio)
comp.add(transparent).size(SizeMode.FIT_HEIGHT)

Visual Effects

Opacity

Control layer transparency:

comp.add(transparent).opacity(0.7) // 70% opacity
comp.add(transparent).opacity(0.3)      // 30% opacity
comp.add(transparent).opacity(0.0)   // Invisible

comp.add(transparent).opacity(0.7)  # 70% opacity
comp.add(transparent).opacity(0.3)       # 30% opacity
comp.add(transparent).opacity(0.0)    # Invisible

Size Mode Comparison

Mode	Use Case	Aspect Ratio	Example
CONTAIN	Fit entire video	Preserved	Video player
COVER	Fill canvas	Preserved (may crop)	Background video
PX	Exact dimensions	May stretch	Fixed overlays
CANVAS_PERCENT	Responsive sizing	Preserved	Picture-in-picture
SCALE	Relative to original	Configurable	Zoom effects
FIT_WIDTH	Match canvas width	Preserved	Full-width banner
FIT_HEIGHT	Match canvas height	Preserved	Sidebar video

Practical Examples

Picture-in-Picture

Classic PIP layout with main video and small overlay:

// Main video (full screen)
comp.add(mainVideo, 'main')
  .at(Anchor.CENTER)
  .size(SizeMode.CONTAIN)

// PIP video (small, top-right corner)
comp.add(pipVideo, 'pip')
  .at(Anchor.TOP_RIGHT, -30, 30)
  .size(SizeMode.CANVAS_PERCENT, { percent: 25 })
  .opacity(0.9)

# Main video (full screen)
comp.add(main_video, 'main') \
    .at(Anchor.CENTER) \
    .size(SizeMode.CONTAIN)

# PIP video (small, top-right corner)
comp.add(pip_video, 'pip') \
    .at(Anchor.TOP_RIGHT, dx=-30, dy=30) \
    .size(SizeMode.CANVAS_PERCENT, percent=25) \
    .opacity(0.9)

Side-by-Side Comparison

Two videos side by side:

// Left transparent video
comp.add(transparent1)
  .at(Anchor.CENTER_LEFT, 50)
  .size(SizeMode.CANVAS_PERCENT, { width: 45 })

// Right transparent video
comp.add(transparent2)
  .at(Anchor.CENTER_RIGHT, -50)
  .size(SizeMode.CANVAS_PERCENT, { width: 45 })

# Left transparent video
comp.add(transparent1) \
    .at(Anchor.CENTER_LEFT, dx=50) \
    .size(SizeMode.CANVAS_PERCENT, width=45)

# Right transparent video
comp.add(transparent2) \
    .at(Anchor.CENTER_RIGHT, dx=-50) \
    .size(SizeMode.CANVAS_PERCENT, width=45)

Overlay Grid

Multiple small overlays in a grid:

const gridSize = 20 // 20% of canvas for each video
const margin = 30   // 30px margin from edges

// 2x2 grid
comp.add(transparent1).at(Anchor.TOP_LEFT, margin, margin)
    .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
comp.add(transparent2).at(Anchor.TOP_RIGHT, -margin, margin)
    .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
comp.add(transparent3).at(Anchor.BOTTOM_LEFT, margin, -margin)
    .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
comp.add(transparent4).at(Anchor.BOTTOM_RIGHT, -margin, -margin)
    .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })

grid_size = 20  # 20% of canvas for each transparent video
margin = 30     # 30px margin from edges

# 2x2 grid
comp.add(transparent1).at(Anchor.TOP_LEFT, dx=margin, dy=margin) \
    .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
comp.add(transparent2).at(Anchor.TOP_RIGHT, dx=-margin, dy=margin) \
    .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
comp.add(transparent3).at(Anchor.BOTTOM_LEFT, dx=margin, dy=-margin) \
    .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
comp.add(transparent4).at(Anchor.BOTTOM_RIGHT, dx=-margin, dy=-margin) \
    .size(SizeMode.CANVAS_PERCENT, percent=grid_size)

Z-Order (Layer Stacking)

Control which layers appear in front:

// Background layer (behind everything)
comp.add(backgroundVideo, 'bg').z(0)

// Main content (middle layer)
comp.add(mainVideo, 'main').z(10)

// Overlay effects (in front)
comp.add(overlayVideo, 'overlay').z(20)

// Logo (always on top)
comp.add(logoVideo, 'logo').z(100)

# Background layer (behind everything)
comp.add(background_video, 'bg').z(0)

# Main content (middle layer)
comp.add(main_video, 'main').z(10)

# Overlay effects (in front)
comp.add(overlay_video, 'overlay').z(20)

# Logo (always on top)
comp.add(logo_video, 'logo').z(100)

Alpha Channel Control

Control transparency processing for each layer:

// Use alpha channel (default - transparent background shows through)
comp.add(transparent).alpha(true)

// Ignore alpha channel (opaque - background becomes black)
comp.add(transparent).alpha(false)

# Use alpha channel (default - transparent background shows through)
comp.add(transparent).alpha(enabled=True)

# Ignore alpha channel (opaque - background becomes black)
comp.add(transparent).alpha(enabled=False)

Tips & Best Practices

Responsive Design

Use percentage-based sizing for responsive layouts:

// Main content takes 70% width, sidebar takes 25%
comp.add(mainVideo, 'main').size(SizeMode.CANVAS_PERCENT, { width: 70 })
comp.add(sideVideo, 'side').size(SizeMode.CANVAS_PERCENT, { width: 25 })

Visual Hierarchy

Use z-order to control layer stacking
Use opacity to create depth
Use size to emphasize importance

What’s Next?

⏰ Control Timing

Learn how to control when layers appear and disappear

🎬 Export Your Video

Choose the right export format and quality settings

Getting Started

Guides

API Reference

SDK Reference

Examples & Integrations

Positioning & Sizing | Remove Video Background Positioning

Positioning System

⚓ Anchors

📏 Offsets

📐 Size Modes

Anchor Points

Size Modes

CONTAIN (Fit Within Canvas)

COVER (Fill Canvas)

PX (Exact Pixels)

CANVAS_PERCENT (Percentage of Canvas)

SCALE (Relative to Original)

FIT_WIDTH / FIT_HEIGHT

Visual Effects

Opacity

Size Mode Comparison

Practical Examples

Picture-in-Picture

Side-by-Side Comparison

Overlay Grid

Z-Order (Layer Stacking)

Alpha Channel Control

Tips & Best Practices

Responsive Design

Visual Hierarchy

What’s Next?

⏰ Control Timing

🎬 Export Your Video

​Positioning System

⚓ Anchors

📏 Offsets

📐 Size Modes

​Anchor Points

​Size Modes

​CONTAIN (Fit Within Canvas)

​COVER (Fill Canvas)

​PX (Exact Pixels)

​CANVAS_PERCENT (Percentage of Canvas)

​SCALE (Relative to Original)

​FIT_WIDTH / FIT_HEIGHT

​Visual Effects

​Opacity

​Size Mode Comparison

​Practical Examples

​Picture-in-Picture

​Side-by-Side Comparison

​Overlay Grid

​Z-Order (Layer Stacking)

​Alpha Channel Control

​Tips & Best Practices

​Responsive Design

​Visual Hierarchy

​What’s Next?

⏰ Control Timing

🎬 Export Your Video

Positioning System

Anchor Points

Size Modes

CONTAIN (Fit Within Canvas)

COVER (Fill Canvas)

PX (Exact Pixels)

CANVAS_PERCENT (Percentage of Canvas)

SCALE (Relative to Original)

FIT_WIDTH / FIT_HEIGHT

Visual Effects

Opacity

Size Mode Comparison

Practical Examples

Picture-in-Picture

Side-by-Side Comparison

Overlay Grid

Z-Order (Layer Stacking)

Alpha Channel Control

Tips & Best Practices

Responsive Design

Visual Hierarchy

What’s Next?