Skip to content
Design and images

Video on a trade website: short, silent, useful

How long a video on a trade website may run, why it starts silently, and what a still image, captions and load time have to do with it in daily practice.

15 min read VideoGestaltungLadezeitBarrierefreiheitHandwerk

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.

OccasionWhat a short video showsWhere a photo is enough
Bathroom refitHow the room opens up as you walk through it, how a level-access shower is really connectedThe finished state, materials, jointing, close-ups of the fittings
Heat pump or ventilationHow loud the unit actually is in operation and how it sits in the gardenPosition, clearances, connecting lines, rating plate
Joinery workHow a drawer runs, how gently a flap closes, how a front swingsGrain, edge, fitting, surface in raking light
Roof after a stormHow extensive the damage is when the camera pans across the surfaceIndividual damaged areas, junction points, condition before work starts
Training and teamHow a working day sounds and what tone people use with each otherFaces, 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.

HTTP Archive, Web Almanac 2024, Media chapter

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

For service and project pages: keep it short. On a careers page a video may run somewhat longer, because more people and more atmosphere have to fit in. The homepage carries the strictest rule, because that is where most visitors arrive first and where the fewest already know what they are looking for: if a video appears there at all, it should be short, silent and below the first screen. Which sections belong on the homepage and in what order is described in the article on homepage structure.

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

The area visible without scrolling decides load time on a phone. Put a video there and the render waits for the heaviest file on the page. Put a still image there and the video one screen further down, and the page stays fast while the film remains easy to find. Why those seconds matter particularly in the trades, and how the difference can be measured, is covered in the article on load time on mobile.

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.

RequirementWhat it means in the businessHow to check it
Captions for prerecorded audioA 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 videosThree to five sentences of running text below the video describing the same sequenceSomeone reading only the text takes away the same message as someone watching the film
Operable without a mouseA player with visible controls that can be reached with the keyboardUsing the tab key you reach play, pause and volume and can see where the focus sits
No forced soundAudio starts only on request, and there is a way to pause itOpening the page stays silent, and the button for sound is visibly labelled
Understandable without soundKey details appear as on-screen text or in the text beside the videoWatch 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

It hits twice: visitors close the page before they have found the button, and the WCAG 2.2 requirement on controlling automatically played audio is breached. Both can be avoided with a single move - dropping the autoplay attribute, or, where motion is wanted, combining muted, short and visible controls. Check this again after every rebuild of the site, because video embeds are typically carried over when templates change.

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-embed.html
<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.

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.

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

Adoption, duration, formats and attributes of video: HTTP Archive, Web Almanac 2024, Media chapter, figures 5.37 to 5.40. Requirements for captions, alternatives, automatically played audio and moving content: Web Content Accessibility Guidelines (WCAG) 2.2 by the W3C, success criteria 1.2.1, 1.2.2, 1.4.2 and 2.2.2. Rules for automatic start in the browser: Chrome for Developers, Autoplay policy in Chrome. Business figures: the Bitkom study report on digitalisation in the skilled trades (504 trade businesses surveyed, 2025). We answer questions about your own material through the contact form.

Related Articles

Design and images

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.

15 min read
Law and obligations

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.

15 min read
Website and structure

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.

15 min read