Skip to main content

​
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_LEFTTOP_CENTERTOP_RIGHT
CENTER_LEFTCENTERCENTER_RIGHT
BOTTOM_LEFTBOTTOM_CENTERBOTTOM_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

ModeUse CaseAspect RatioExample
CONTAINFit entire videoPreservedVideo player
COVERFill canvasPreserved (may crop)Background video
PXExact dimensionsMay stretchFixed overlays
CANVAS_PERCENTResponsive sizingPreservedPicture-in-picture
SCALERelative to originalConfigurableZoom effects
FIT_WIDTHMatch canvas widthPreservedFull-width banner
FIT_HEIGHTMatch canvas heightPreservedSidebar 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