In short and in plain language
A video shows what a photo cannot. For example, how quiet a heat pump runs. This article looks at that.
Keep your video short. Short films are more likely to be watched to the end.
The video starts without sound. Sound is the exception. Captions belong with it. They help everyone who watches without sound.
Show a still image first. The video loads only after a click. That way it hardly slows the page down.
We build your website at a fixed price and add your videos as part of it.
A video on a trade business website has one simple job: to show what a photo cannot. How a sliding door actually runs, how quiet a heat pump is in operation, how a joint is really formed. 94 percent of trade businesses run a website of their own (Bitkom), yet only 6.7 percent of all mobile pages embed a video at all (Web Almanac 2024). Anyone using one therefore belongs to a minority - and inherits the mistakes that are common within it: too long, too loud, too heavy. This article describes what a video looks like that is short enough to be watched to the end, quiet enough not to startle a visitor, and light enough not to slow the page down.
Key takeaways
- Nine out of ten videos on the web are under two minutes long, and more than half are under 30 seconds (Web Almanac 2024). A business video that runs considerably longer works against a habit formed elsewhere.
- Sound is the exception, not the default. If audio starts on its own and plays for more than 3 seconds, WCAG 2.2 requires a way to pause it or to control its volume separately (W3C).
- 23 percent of video elements carry an autoplay attribute, but only 8 percent a muted attribute and only 3 percent a still image in the poster attribute (Web Almanac 2024). That mixture is exactly what produces the usual complaints.
- Captions are not an add-on: for prerecorded audio in synchronized media, WCAG 2.2 requires captions at Level A (W3C). They also help everyone watching in silence in a waiting room or on a train.
- A still image in the poster attribute, preload="none" and a video that loads only after a click: the film then costs the first page render almost nothing and still stays one click away.
What a video should do - and what it should not
Video on websites is growing: the share of mobile pages with at least one video element rose by 32 percent in relative terms compared with the previous survey (Web Almanac 2024). For a trade business that is neither an instruction nor an argument. The question is not whether others use video, but whether in your case it explains something that text and images do not. Motion, sound and sequence are the three things only a video carries. Everything else - prices, availability, service area, past work - reads faster and more reliably as text on the page.
That leads to an uncomfortable restriction: a corporate film showing the premises from outside, panning across the van fleet and ending on the logo usually explains nothing at all. It costs load time, production effort and attention, and answers none of the questions that brought someone to the page. A 40-second clip in which a fitter shows what the consumer unit looks like after the rebuild and where the fuses now sit answers a very specific question.
It pays to write down the division of labour between text, photo and video before the first recording. The table below is the starting point we use in projects; it can be adapted for any trade.
| Occasion | What a short video shows | Where a photo is enough |
|---|---|---|
| Bathroom refit | How the room opens up as you walk through it, how a level-access shower is really connected | The finished state, materials, jointing, close-ups of the fittings |
| Heat pump or ventilation | How loud the unit actually is in operation and how it sits in the garden | Position, clearances, connecting lines, rating plate |
| Joinery work | How a drawer runs, how gently a flap closes, how a front swings | Grain, edge, fitting, surface in raking light |
| Roof after a storm | How extensive the damage is when the camera pans across the surface | Individual damaged areas, junction points, condition before work starts |
| Training and team | How a working day sounds and what tone people use with each other | Faces, workshop, vehicles, workwear |
Taken seriously, that table leaves most businesses with two to four videos - not twenty. The rest stays a photo series, and that is no step backwards: how far good images carry on their own is shown in the article on websites for joineries, and how to produce the material without equipment is set out in the guide to phone photos for trade websites.
Short: the length that gets watched to the end
The Web Almanac survey measured the duration of videos delivered on mobile pages: 21 percent run between 0 and 10 seconds, 37 percent between 10 and 30 seconds, 21 percent between 30 and 60 seconds, 12 percent between 60 and 120 seconds and 9 percent longer than 120 seconds (Web Almanac 2024). The centre of gravity therefore sits well below a minute - not because shorter videos are inherently better, but because viewing habits on the web have settled around that length.
Nine out of ten videos are less than two minutes long. More than half are under 30 seconds.
In practice that means the first sentence and the first frame decide everything. An opening title with a logo animation burns the seconds in which the decision to keep watching is made. A video that starts with the subject itself - the hand on the tool, the room before the refit, the unit running - has not given those seconds away. Titles, business name and contact details belong at the end or on the page around the film, not at its start.
Cutting is uncomfortable, because inside a business every work step feels important. A practical approach: make a rough cut first, watch the result a day later, then delete everything you want to skip on the second viewing. The video becomes shorter, and it does not become poorer for it, but clearer. What falls away is rarely the content; it is the hesitation before the statement.
A length a business can sustain
Silent: why sound is the exception
The analysis of attributes on video elements shows a striking mismatch: autoplay appears on 23 percent of elements, muted on only 8 percent, and a still image in the poster attribute on just 3 percent (Web Almanac 2024). Some pages mute their audio by other means, some simply try to start with sound. The result is familiar to anyone who has taken a phone out of their pocket in a waiting room.
Browsers have responded. Under the autoplay rules in Chrome, a muted automatic start is permitted, while an automatic start with sound is allowed only under additional conditions - for example if the person has already used the site before. A video that wants to start with sound is therefore treated differently depending on device and history. Anyone who needs the sound plans for a visible play button rather than for an automatic start.
On top of that come the requirements of the Web Content Accessibility Guidelines. If audio on a page plays automatically for more than 3 seconds, there must be a way to pause or stop it or to control its volume independently of the system volume (W3C). A related rule applies to moving content: anything that starts automatically, lasts more than five seconds and appears alongside other content needs a way to pause, stop or hide it (W3C). A silent background film without controls does not meet that.
- No automatic start with sound. Audio begins when someone asks for it - through a visible button, not by opening the page.
- If a video is to run on its own, it should be silent, short and fitted with visible controls so it can be stopped.
- Moving backgrounds need a pause control as soon as they run for more than five seconds alongside other content.
- Sound must not be the only source of information: what is said also belongs in captions and in the text beside the video.
- Videos that become incomprehensible without sound do not belong on a page where visitors are typically browsing in silence.
The silent start is not a compromise but a design decision: a video that works without sound works everywhere. How often such self-starters appear together with other avoidable patterns is shown in the collection of common mistakes on trade websites.
Weight: what a video costs in load time
A video is usually the heaviest file a trade website delivers. What matters is therefore less the file size itself than the question of when it is loaded. Two attributes exist for exactly that and are barely used: a still image via poster appears on only 3 percent of video elements, preload on 16 percent (Web Almanac 2024). Without a still image the browser shows an empty area until enough data has arrived to draw the first frame - and downloads data that many visitors will not need.
The clean order is therefore: a still image as an ordinary picture first, the film on request afterwards. The still is an optimised JPEG or WebP of a few dozen kilobytes, the video is delivered with preload="none" and only starts loading when someone presses play. For the page that means the visible render no longer waits for the video, and the largest visible element is an image the browser can paint quickly.
- Set a still image: poster points to an optimised picture at the same width as the video, so the area has the right height from the start.
- State height and width: width and height on the video element stop the text below from jumping while the page loads.
- Use preload="none": the video loads after the click, not during the page render.
- Limit the resolution: for display on a content page, 1280 by 720 pixels is usually enough; larger files are invisible on a phone.
- Limit the length: 30 seconds instead of three minutes shrinks the file more than any fine tuning of the compression settings.
The video does not belong in the first screen
Captions and transcript: two files, one benefit
Captions are the part that tends to be forgotten during the shoot and resented afterwards. The requirement is unambiguous: for prerecorded audio in synchronized media, the Web Content Accessibility Guidelines require captions at Level A - the only exception being media that are themselves an alternative for text and are clearly labelled as such (W3C). Level A is the lowest level; there is nothing below it.
Videos with no sound at all fall under a separate rule: if a prerecorded film has no audio track, an alternative for time-based media or an audio track presenting the same information is required (W3C). In practice that means a silent process clip needs a short written description beside it saying the same thing. That is not a large job - three to five sentences will do - but somebody has to do it.
| Requirement | What it means in the business | How to check it |
|---|---|---|
| Captions for prerecorded audio | A WebVTT file beside the video, referenced through a track element with kind="captions" | The caption track can be switched on and off in the player and runs in sync with the speech |
| Alternative for silent videos | Three to five sentences of running text below the video describing the same sequence | Someone reading only the text takes away the same message as someone watching the film |
| Operable without a mouse | A player with visible controls that can be reached with the keyboard | Using the tab key you reach play, pause and volume and can see where the focus sits |
| No forced sound | Audio starts only on request, and there is a way to pause it | Opening the page stays silent, and the button for sound is visibly labelled |
| Understandable without sound | Key details appear as on-screen text or in the text beside the video | Watch the video muted and check whether the message still comes across |
Planning captions from the start saves the rework. A narration script written beforehand is almost the caption file already: add timestamps, break the lines to a readable length, done. Which statutory requirements apply to trade businesses beyond that, and to whom they apply at all, is set out in the article on the accessibility act and trade businesses.
Automatic start with sound is the expensive mistake
The embed: still image first, video second
Technically the embed is unspectacular, and that is its strength: a video element in the page source, an MP4 file beside it, a still image and a caption file. MP4 is the format the web has settled on: 68 percent of delivered video files carry that extension (Web Almanac 2024). For a trade business the format question is therefore answered before it is asked.
The excerpt below shows an embed that brings together the points made so far: visible controls, playback in the page flow rather than full screen, no preloading, a still image set, dimensions stated, a caption track referenced and a fallback for the case where playback is not possible.
<video
controls
playsinline
preload="none"
poster="/images/bathroom-still.jpg"
width="1280"
height="720">
<source src="/videos/bathroom.mp4" type="video/mp4">
<track kind="captions" srclang="en" label="English"
src="/videos/bathroom-captions.vtt" default>
<p>This video cannot be played here.
<a href="/videos/bathroom.mp4">Download the file</a></p>
</video>Three details are worth explaining. playsinline makes the video run inside the page flow on a phone instead of jumping into full screen unasked. default on the track element shows the captions from the outset, which should be the default for silent viewing. And the paragraph at the end is not decoration: it appears when playback does not work at that spot and at least hands over the file.
Treat the still as a real image
The poster image is handled like any other picture: suitable width, modern image formats, a meaningful file name. It is the image most visitors will see of the video, because a share of them do not start the film at all.
Keep captions as a file
The WebVTT file sits beside the video in the same directory and shares its name stem. When the site moves, it is immediately clear which captions belong to which film, and nothing is left behind.
Load only on click
preload="none" defers the transfer to the moment it is wanted. On a page with three videos that is the difference between a fast render and a page that noticeably drags on a phone.
Serve it yourself instead of embedding
A video delivered from your own storage brings no external fonts, tracking pixels or consent prompts with it. For short business videos of the length described here, that is the simpler and legally calmer route.
Handed to an agency or your own maintainer, these points are implemented in half an hour. How we bring video, images and text together on a trade website is shown in the overview of web design for the trades.
What to film: formats that carry
The raw material for short videos already exists in many businesses: footage from the site is produced anyway - for documentation, for coordination with the client, or simply because a work step looked good. The difference lies less in the raw material than in the selection. On your own site a video appears because it answers a question, and not because the working day happened to provide it - and that selection can only be made inside the business itself.
Four formats have proven to carry their weight in projects. They barely differ in how they are recorded, but clearly in the role they play on the page.
- The process clip: short, one shot, one work step. It answers the question of how something is done and fits on any service page.
- The room pan: a calm walk through the finished room, uncut. It shows proportions that get lost in photos and works particularly well for bathrooms, kitchens and interior fit-outs.
- The sound proof: a few seconds of the unit running, with sound, started voluntarily. For heat pumps, ventilation and door systems that is the answer to the most frequently asked question.
- The team window: a somewhat longer film on the careers or apprenticeship page in which two people describe how a normal day runs. Not advertising copy, but an impression of the tone in the business.
- The before-and-after cut: two shots from the same position, hard cut. It works in silence and needs no commentary.
The same caution applies as with photos: other people's homes, names and recognisable faces need clearance before anything goes online. How to show work without naming clients is described in the article on showing past work without client names; where the team window pays off most is covered in the article on a trade careers page that works.
Recording on site: light, sound, calm
For the lengths described here, a current phone is enough. The three points where footage from a business usually fails are not the camera but light, sound and camera movement. All three can be improved without extra equipment, provided they are considered before the record button rather than after.
Light: windows behind the camera, not behind the subject. Sound: as close as possible to the person speaking, machines switched off for the duration of the take, and remember that the echo of an empty building site is the hardest place for speech. Movement: without a stabiliser, lean against something, hold your breath and move more slowly than feels natural. A steady handheld shot beats a pan you cannot watch afterwards.
- Record in landscape if the video is meant for the website - portrait rarely fits sensibly into the page flow.
- Write down one sentence carrying the message of the video before recording. If you cannot phrase that sentence, you do not yet have a subject.
- Take two shots of the same process: one wide, one close. The cut between them carries half the video.
- Start the take a few seconds early and let it run a few seconds long, so the edit has room to breathe.
- Photograph the still image during the same visit - that becomes the poster image later and takes only a moment.
The same moves improve the photos taken alongside. Doing both in one visit produces a consistent set of images from a single site. We support the selection, cropping and embedding of image and video material through our service for photos for trade websites.
Fix the subject
Pick a question customers actually ask and write down in one sentence what the video answers. Without that sentence you produce footage nobody can place later.
Record in one visit
On a site where work is happening anyway, take a wide shot and a close shot and photograph the still image. The effort stays small, because work is happening anyway.
Cut and caption
Cut it short, add key details as on-screen text, write the captions. The narration script becomes the caption file, not the other way round.
Embed and check
Set the still, the preload attribute and the caption track, then open the page on a phone and watch it render. The embed is finished only when the page is as fast as it was without the video.
Pick a question customers actually ask and write down in one sentence what the video answers. Without that sentence you produce footage nobody can place later.
On a site where work is happening anyway, take a wide shot and a close shot and photograph the still image. The effort stays small, because work is happening anyway.
Cut it short, add key details as on-screen text, write the captions. The narration script becomes the caption file, not the other way round.
Set the still, the preload attribute and the caption track, then open the page on a phone and watch it render. The embed is finished only when the page is as fast as it was without the video.
Where the video sits and what it should achieve
The position on the page decides the effect. On a service page the video belongs after the description of the service and before the enquiry option: anyone who has read that far is interested enough to click and finds the form immediately afterwards. On a project page it sits between the before and after images. On the homepage it sits, if at all, below the first screen.
The benefit can be judged without elaborate measurement. Three questions matter: is the play button pressed at all? Does the share of visitors who send an enquiry from that page rise? And do the questions the video answers come up less often on the phone? In a trade business the third question is typically answered most reliably by the office - after four to six weeks, not after three days.
- One video per page is enough. Two films below each other split the attention and double the weight of the page.
- The text beside the video stays complete. It carries the message for everyone who does not start the film - and that is regularly the majority.
- The next step follows the video: enquiry form, phone number or appointment suggestion, visible without further scrolling.
- Old videos are reviewed together with the photos. A film showing vehicles in the previous livery dates the page faster than any year.
- A video that has barely been started in six months is replaced or removed, not defended against the numbers.
Short, silent and useful is therefore not a matter of style but the summary of three measurable requirements: a length that gets watched to the end, a start that forces no sound, and a weight that does not slow the page down. The services we offer around structure, images and video are listed in the overview of our services.
Sources for this article
Related Articles
The most common mistakes on trade websites
Twelve mistakes that cost trade websites enquiries: from the gallery without captions to the form that never confirms, with a self-check in ten minutes.
What the Accessibility Act means for trades
The German Accessibility Strengthening Act does not cover every business. What section 2 no. 17 and section 3 (3) BFSG actually say, and what stays regardless.
Mobile load time: why it matters in the trades
Enquiries to trade businesses arrive on a phone, on mobile data. What load time costs, the three usual causes and how to test your own site in minutes.