Background Demo
Background Video
This page demonstrates the background video feature with autoplay, looping, and overlay support. The video plays automatically in the background while you scroll.
Autoplay
Videos start playing automatically when the page loads. Muted by default to comply with browser autoplay policies.
Seamless Loop
Videos loop seamlessly, creating a continuous ambient background that enhances the visual experience.
Mobile Fallback
Option to show a poster image on mobile devices instead of video to save bandwidth and battery.
Configuration
Configure per-page background videos in config/params/canvasAnimations.php:
'site/bg-video' => [ 'enabled' => true, 'type' => 'video', 'video' => [ 'src' => '@web/videos/spaceship.mp4', 'poster' => '@web/images/backgrounds/background-1.jpg', 'loop' => true, 'muted' => true, 'autoplay' => true, 'overlay' => 'rgba(0,0,0,0.4)', 'mobileDisabled' => false, ],],Available Options
| Option | Type | Description |
|---|---|---|
src | string|array | Video path (MP4). Use array with light/dark keys for theme-aware videos. |
poster | string|array | Poster image shown before video loads or on mobile fallback. |
loop | boolean | If true, video loops continuously. |
muted | boolean | If true, video plays muted. Required for autoplay in most browsers. |
autoplay | boolean | If true, video starts playing automatically on page load. |
playsinline | boolean | If true, video plays inline on mobile (not fullscreen). |
overlay | string | Optional overlay color for text readability. |
mobileDisabled | boolean | If true, shows poster image on mobile instead of video. |
Theme-Aware Videos
Like images, videos can also be theme-aware. Use an array with light/dark keys to serve different videos based on the current theme:
'src' => [ 'light' => '@web/videos/light-theme.mp4', 'dark' => '@web/videos/dark-theme.mp4',],