Design Principle
Background video is not moving wallpaper. It belongs in production only when it serves first-viewport signal, brand tone, or story evidence without weakening readability, accessibility, licensing, or performance.
Large Theory
Real video assets can establish place, industry, mood, and audience faster than abstract gradients, but they are among the riskiest asset types: footage can include likeness rights, brands, trademarks, private property, landmarks, music, AI-generated traces, and platform-specific custom terms. Hero video also affects LCP, mobile data, reading contrast, attention, and accessibility. Asset intake should not stop at commercial stock video; it must record legal boundaries and the frontend playback contract together.
Small Points
- Define the video role first: hero background, b-roll, product evidence, case story, social ad draft, Zoom background, or moodboard only. Each role changes licensing and implementation requirements.
- Confirm license on the exact video page. Coverr uses a custom license; its current license page requires credit for free downloads and forbids AI training, datasets, and competing services. Mixkit has Free and Restricted stock-video licenses, so platform-level commercial use cannot be assumed.
- Rights beyond copyright still matter: recognizable people, brands, trademarks, private places, buildings, artworks, and music may require releases or usage limits.
- Background video that starts automatically, lasts longer than five seconds, and runs beside other content needs a visible pause, stop, or hide mechanism;
prefers-reduced-motionshould show a poster or static image. - Frontend implementation should generate a poster, mobile low-bitrate variant, intentional crop, scrim/overlay, captions or text alternatives, and
object-fitrules; do not drop the original 4K MP4 into the first viewport. - If video conveys information, provide equivalent text, captions, or description. If it is decorative, keep screen readers from duplicating it and put core meaning in real text.
Design Judgment
If the hero still explains the brand, product, or task after video is removed; users can still read and act when motion is disabled; and maintainers can trace source, credit, modification, release risk, and forbidden uses, the video asset is healthy.
Implementation Notes
Create a video asset intake record: assetId, source, videoUrl, licenseName, licenseHref, licenseType, creator, creditRequired, creditPlacement, downloadDate, duration, fps, resolution, crop, poster, mobileVariant, muted, autoplay, loop, pauseControl, reducedMotionFallback, captions/transcript, peopleRisk, brandRisk, propertyRisk, forbiddenUses, qualityBudget, and relatedPageRole. In React/Next.js, self-host optimized files, use poster, and prefer preload="none" or lazy loading where possible. Autoplay must pair muted, playsInline, loop, and a pause button.
Counterexamples/Risks
Treating stock video as real customer or product evidence; loading a 40MB 4K MP4 in the hero; placing text over video without a contrast-stable scrim; shipping no pause button; continuing playback under reduced motion; skipping likeness/trademark release notes; bundling Coverr or Mixkit clips into template assets; using footage for AI training data; and using Restricted License video in commercial ads.
Case Study
Coverr's license page says its videos and music can be used for commercial and non-commercial projects, but it also says free downloads need credit, forbids compiling a competing service and AI training or datasets, and warns that brands, trademarks, properties, and landmarks may not be cleared. Mixkit's video page says Free License clips can be used in commercial projects such as YouTube videos, social media marketing, online ads, and music videos, while Restricted License clips are non-commercial only. Mixkit User Terms also state that users receive a non-exclusive license, and restrict aggregation, competing services, and selling insufficiently transformed copies. WCAG 2.2.2 requires pause, stop, or hide mechanisms for automatically moving content, and web.dev's lazy-video guidance recommends poster and preload="none" to control initial downloads. The reusable lesson is that video asset recommendations must include license, release, playback control, and performance budget together.
Source Links
Coverr License: https://coverr.co/license Coverr Stock Video: https://coverr.co/ Mixkit Stock Video: https://mixkit.co/free-stock-video/ Mixkit License: https://mixkit.co/license/ Mixkit Terms: https://mixkit.co/terms/ W3C WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html web.dev Lazy Loading Video: https://web.dev/articles/lazy-loading-video MDN video element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video
Agent Directive
Before recommending stock video, output exact video page, license type, credit, people/trademark/property release risk, poster, mobile variant, pause control, reduced-motion fallback, and forbidden uses; do not treat a free platform name as rights clearance.