Layers

Video Layer

Video layers display video content with playback controls, looping, and speed adjustment. Videos play automatically when the layer is visible.

Example

video-layer.json

{
  "type": "video",
  "id": "video-1",
  "name": "Background Video",
  "visible": true,
  "locked": false,
  "mediaUrl": "https://example.com/video.mp4",
  "objectFit": "cover",
  "focalPoint": { "x": 0.5, "y": 0.5 },
  "mediaScale": 1,
  "loop": true,
  "playbackSpeed": 1,
  "brightness": 1,
  "contrast": 1,
  "saturation": 1,
  "borderRadius": 0,
  "transform": {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": 1,
    "rotation": 0,
    "opacity": 1
  }
}

Properties

Property	Type	Default	Description
`mediaUrl`	string	required	URL of the video file
`objectFit`	string	"cover"	"cover" \| "contain" \| "stretch"
`focalPoint`	object	{x: 0.5, y: 0.5}	Focus point for cover mode (0-1)
`mediaScale`	number	1	Zoom level (1 = fit, >1 = zoom in)
`loop`	boolean	true	Whether video loops automatically
`playbackSpeed`	number	1	Playback rate (0.25-4, 1 = normal)
`brightness`	number	1	Brightness (0-2, 1 = normal)
`contrast`	number	1	Contrast (0-2, 1 = normal)
`saturation`	number	1	Saturation (0-2, 1 = normal)
`borderRadius`	number	0	Corner radius in pixels

Playback Behavior

Videos auto-play when the layer becomes visible
Audio is muted by default
Looping is enabled by default for seamless backgrounds
Playback speed can range from 0.25x (slow motion) to 4x (fast forward)

Supported Formats

MP4 (.mp4) - H.264 codec recommended
WebM (.webm) - VP8/VP9 codec
MOV (.mov) - QuickTime format