Before adding video or animation to a public website, define the user task it improves and test the lightest format that can do the job. Budget mobile performance, provide accessible controls and alternatives, respect reduced-motion preferences and preserve the core message without playback. Confirm rights, privacy, hosting and maintenance ownership.
This is an accessible web design and conversion optimisation decision. Motion should improve understanding, not become decorative technical debt.
W3C guidance recommends captions for speech and important non-speech audio, descriptions for important visual information, transcripts where needed and accessible media players Source: W3C Web Accessibility Initiative.
Define the job of the media
Write the user question, desired behaviour and evidence that video or animation will help. Valid roles include demonstrating a process, showing physical context, explaining spatial change or confirming product behaviour.
If a still image, diagram or short text answers the question faster, use it. Do not add a looping background merely because a design concept feels static.
Choose the lightest useful format
Compare text, image, SVG, CSS transition, short video and interactive demonstration. Select the format that communicates the information with the lowest complexity and accessibility burden.
Avoid animated GIFs for large photographic sequences. Modern video formats can be more efficient and provide playback control; web.dev recommends replacing animated GIFs with video for performance where appropriate Source: web.dev.
Set a mobile performance budget
Define maximum initial bytes, delayed bytes, poster weight, player script cost and allowable effect on Core Web Vitals. Test on a representative lower-end phone and slow connection, not only an office laptop.
Measure largest contentful paint, interaction responsiveness, layout shift, total transfer and CPU. Video can sit below the fold yet still consume bandwidth if preload and scripts are configured poorly.
Control loading deliberately
Use a lightweight poster and appropriate dimensions to reserve space. Choose preload behaviour based on actual need. Lazy-load off-screen video and defer nonessential player code.
web.dev describes using preload settings and Intersection Observer approaches for lazy-loading video, while noting that implementation should suit the playback case Source: web.dev. Test the chosen pattern across supported browsers.
Do not lazy-load the primary poster or critical media in a way that delays the main content unexpectedly.
Avoid harmful autoplay
Do not autoplay sound. For silent decorative motion, assess whether autoplay is needed at all and provide a way to pause when motion persists.
Autoplay policies vary across browsers and devices, so never make the core message depend on automatic playback. Preserve a clear manual play control and meaningful poster.
Limit looping and movement near text, forms or important controls. Repeated motion can distract, cause discomfort or consume resources.
Respect reduced-motion preferences
Use the user's reduced-motion preference to remove, shorten or replace nonessential animation. Avoid large parallax, rapid zoom, flashing and vestibular triggers.
Reduced motion does not always mean remove every transition. Preserve functional state feedback with a simpler, near-instant alternative.
Test keyboard and touch interactions after motion is reduced. The interface must not rely on an animation finishing to expose required controls.
Provide captions and transcripts
Create accurate captions from the final audio, including meaningful non-speech information. Review automated captions rather than publishing them unedited.
Provide transcripts when they improve access, scanning, search or reference. Describe essential visual content that is not conveyed in narration.
W3C provides planning guidance for captions, transcripts, description and accessible players Source: W3C Web Accessibility Initiative. Determine the appropriate alternatives for the specific media.
Use accessible player controls
Controls must be keyboard operable, visibly focused, labelled and usable with assistive technology. Include play, pause, volume, captions and full-screen options as appropriate.
Do not hide controls until pointer hover. Ensure touch targets and contrast are sufficient. Keep focus stable when entering or exiting full-screen mode.
Test with keyboard, screen reader, zoom and high contrast across representative browsers.
Preserve the page without media
The page should still communicate its essential offer or instruction if the media fails, is blocked, is not played or consumes too much data. Provide a concise text summary and static evidence.
Do not place navigation or critical calls to action only inside video. Link to relevant details and downloadable information outside the player.
Use progressive enhancement so a failed script does not leave a blank hero.
Compress and encode responsibly
Create renditions appropriate to device and viewport. Remove unnecessary duration, resolution, frame rate and audio tracks. Use modern formats with compatible fallbacks where audience evidence requires them.
Set poster images, width and height. Avoid serving a desktop 4K background to a small phone. Consider adaptive streaming for longer or high-volume media.
Review visual quality at actual display size rather than preserving invisible production detail.
Choose hosting and delivery
Compare self-hosting, a video platform and a specialist media CDN by performance, player accessibility, privacy, analytics, cost, branding and regional delivery.
Third-party embeds can add scripts, cookies, requests and layout changes before playback. Test consent behaviour and consider click-to-load patterns when appropriate.
Document storage, bandwidth, transcoding, retention and account ownership. Keep original masters and captions under business control.
Address privacy and consent
Inventory identifiers, cookies, viewing analytics, embedded platforms and cross-border data flows. Ensure the privacy notice and consent design reflect actual behaviour.
Do not load optional tracking before the applicable choice. Configure privacy-enhanced modes only after verifying what they do.
Minimise analytics to decisions the business will use. View percentage and play events can be useful without collecting unnecessary identity.
Confirm rights and claims
Obtain licences and releases for footage, music, voice, images, locations and customer appearances. Record territories, media, duration and editing rights.
Verify every claim, statistic and demonstration. Add source or qualification where needed. Do not let fast-moving visuals hide conditions customers should understand.
Maintain an expiry date for time-sensitive offers, team footage or product interfaces.
Design analytics around the media's job
Track exposure, play, meaningful progress and relevant next action, but avoid treating completion rate as a universal outcome. A user may understand the answer in thirty seconds of a two-minute video.
Compare the page with and without media through controlled testing where traffic allows. Monitor mobile conversion, performance and accessibility feedback alongside engagement.
Define a removal threshold if cost or harm exceeds value.
Establish production ownership
Assign the content owner, rights owner, technical owner and accessibility reviewer. Store scripts, captions, descriptions, source files, approved claims and encoding settings.
Define how media is updated after a product change or rebrand. A stale demonstration can damage trust more than no video.
Include media in content and dependency audits.
My take: motion should earn its weight
My take is that website video is strongest when it shows something text cannot show quickly. Decorative movement often receives the largest budget and creates the least durable value.
Prototype with a storyboard and static frames first. If the user task improves, produce the smallest accessible version and measure it.
Frequently asked questions
Does video always slow a website?
It adds payload and processing, but loading, encoding, poster and player choices determine the impact. Measure the real implementation.
Should hero video autoplay?
Usually avoid it unless a clear purpose justifies silent motion and users can pause it. Never depend on autoplay for essential content.
Are automated captions enough?
They are a starting point. Review accuracy, speaker identification and meaningful non-speech audio before publication.
Can animation improve usability?
Yes, when it explains state or continuity and respects user preferences. Keep it brief, functional and non-blocking.
Add media that improves the customer experience
If your business needs fast, accessible media experiences, get in touch for website design and conversion optimisation.
Related guides
For further background, read our site speed and conversions and responsive web design. The user journey glossary explains the terminology used in those guides.