Skip to content
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Autoplay
Video starts automatically on page load.
Loop
Video repeats when finished.
Muted
Required for autoplay in most browsers.
Video Controls
Primary focus: Configure video background playback behavior.
Actual Frontmatter
yaml
---
layout: home
hero:
background:
type: video
video:
src: /videos/hero-bg.mp4
autoplay: true
loop: true
muted: true
playsinline: true
---API Keys
| Key | Type | Default | Description |
|---|---|---|---|
hero.background.video.src | string | required | Video file path |
hero.background.video.autoplay | boolean | true | Auto-play on load |
hero.background.video.loop | boolean | true | Loop playback |
hero.background.video.muted | boolean | true | Mute audio |
hero.background.video.playsinline | boolean | true | Inline playback on mobile |
Best Practices
- Always set
muted: truefor autoplay to work - Use optimized video files (WebM/MP4)
- Provide poster image for loading state