Documentation Index Fetch the complete documentation index at: https://docs.videobgremover.com/llms.txt
Use this file to discover all available pages before exploring further.
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
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 )
COVER (Fill Canvas) Scales video to fill entire canvas, may crop edges:
// 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 })
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 })
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 })
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 )
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
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 )
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 })
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 })
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 )
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 )
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
