How to Plan a Website Video That Converts: Brief, Script and Storyboard

Most website videos are planned backwards. Someone books a shoot, the footage arrives, and only then does anyone ask where it goes on the page, what it should make the visitor do, or why the presenter is standing exactly where the headline needs to sit. By then the expensive decisions are already made.

This guide covers the part that happens before anyone presses record: how to plan a website video around a single job, choose the right type of video for each page, write a one-page video brief, script for the time a visitor will actually give you, and storyboard the shoot against your real layout. Publishing it fast and tracking it in WordPress is a separate job, and we link to that guide where it matters.

In short: give every website video one job and one call to action. Match the format to the page, put audience, message, proof, CTA and success metric on a one-page brief, script it to work on mute, and storyboard it with the page mockup open so text, crops and loop points are settled before the shoot.

Start With the Job the Video Has to Do

A website video usually fails for one reason: nobody decided what it was supposed to accomplish before the camera came out. A homepage hero loop, a product demo and a customer testimonial each have a different job, and each belongs in a different spot on the page. That is where any website video strategy starts, whether you are making one clip or twenty.

Before you drop a video block into a WordPress template, answer four questions:

• Who is watching? A first-time visitor scanning the homepage behaves differently from a buyer comparing options on a service page.
• What doubt does it remove? Every page loses people to one main objection, such as price, effort, risk or trust. A video that settles that one objection beats a video that tries to tell the whole brand story.
• What should they do next? Book a call, start a trial, request a quote. The video should point at one action, not five.
• How long will they give you? Hero loops get a few seconds. Service page explainers can earn a minute or two. Case study videos can run longer because the viewer chose to press play.

A quick test: if you cannot finish the sentence “After watching, the visitor should…” in a few words, the project is not ready to brief yet.

One brief worth ruling out early: if the client actually wants visitors to talk to each other or to staff on camera, that is live video chat, not website video, and it is budgeted very differently. Our guide on how much it costs to add video chat to a website explains why.

Choose the Right Type of Website Video for Each Page

The page decides the format, not the other way around. The table below maps the common types of website videos to the page where each one does its best work, with a planning length that gives the scriptwriter a word budget.

Page	Video type	Its job	Planning length	Sound	Next step it points to
Homepage hero	Silent background loop	Set the tone and show what you do	6 to 15 seconds, looping	None, no audio track	Headline and button over the footage
Homepage or service page	Narrated explainer	Answer the main question or objection	60 to 90 seconds	On, with captions	Book a call, request a quote
Product page	Product demo or walkthrough	Show the product working	30 seconds to 2 minutes	Optional, captions always	Start a trial, add to cart
About and team pages	Team or founder introduction	Put faces to the business	45 to 90 seconds	On, with captions	Contact the team
Case studies and reviews	Customer testimonial	Prove results in a customer’s own words	30 to 90 seconds per clip	On, with captions	Ask about a similar project
Paid traffic landing page	Short pitch video	Confirm the promise the ad made	30 to 60 seconds	Must work muted	The one form or button on the page
Help center	How-to or onboarding video	Get people through a task without a ticket	As long as the task needs, with chapters	On, with captions	The next setup step

Treat those lengths as starting points for planning, not rules. Explainer video length is the one people argue about most, and 60 to 90 seconds is a common planning range for website explainers rather than a proven ideal. Once the video is live, your own retention data should overrule any table.

Homepage hero

A homepage video has the shortest window on the site. A short, silent, looping background clip sets the tone and shows what you do without asking for attention. Plan it at roughly 6 to 15 seconds with a clean loop point, skip on-screen text that competes with your headline, and make sure the headline and call to action still read clearly over the brightest frame of the footage.

Because a loop keeps playing for longer than five seconds next to other content, it also needs a visible pause control to meet accessibility guidelines. Put that button in the mockup now rather than squeezing it in at launch. Plan the loop without sound as well: browsers generally only let a video start on its own when it is muted, as the autoplay guide from MDN Web Docs explains, so any audio recorded for a hero loop would never be heard anyway.

Service and product pages

This is where a narrated explainer or demo earns its place. Put it near the top of the page, beside the copy it supports, with a clear thumbnail and a play button. Visitors on these pages are already interested, so a 60 to 90 second video that answers their main questions can do more than another paragraph of text.

A product demo video should show the product doing the job, not a narrator listing features over stock footage. Plan the thumbnail as carefully as the video itself: a frame with a face or the product in use, plus a short label that tells the visitor what they will learn, such as “See how setup works in 90 seconds”.

About, team and testimonial pages

Team introductions, behind-the-scenes clips and customer testimonials build trust. Real people on camera answer the question every buyer has: who am I actually going to work with? It is the same reason original photos of your team and premises beat stock images, one of the trust signals that turn local searchers into customers. For service businesses whose buyers are comparing providers that look alike on paper, a testimonial video or a one-minute team introduction is often where video earns its budget.

Plan testimonials with care. Brief customers on the question, not the answer, so they speak in their own words. If anyone received a discount, gift or payment for appearing, say so on the page; in the US, undisclosed incentives behind a testimonial can breach the FTC’s Endorsement Guides.

Landing pages for paid traffic

A landing page video has one extra job: confirm the promise the ad just made. Keep it short, make sure it works muted, since many visitors arriving from social ads still have the sound off, and point it at the single form or button on the page. If the ad and the video say different things, visitors notice the gap before they notice anything else.

Write a One-Page Video Brief (Template and Example)

A video brief is the cheapest place to fix a video. Changing a line in the brief costs nothing; changing it after the shoot means a reshoot or an awkward edit. Keep it to one page so people actually read it.

Use the first two columns below as your video brief template. The third column fills it in for a hypothetical web design studio making an explainer for its monthly website care plan, to show how specific each answer needs to be.

Brief field	What to write	Example: care plan explainer
Page and placement	The exact URL or template, where the player sits, and the attached mockup	The care plans page, beside the plan comparison, in the first screen on desktop
Audience	Who arrives on that page and what they already know	Small business owners who have already lived through one broken update
The one objection	The doubt this video has to remove	“Why pay every month when nothing is broken?”
Core message	One sentence the viewer should be able to repeat afterwards	Every update is tested on a copy of your site before it touches the live one
Proof	What will be shown on screen to back the message up	The weekly report, and a real client on camera
Call to action	The exact words, matching the button on the page	Book a free site check
Length and formats	Target duration, desktop and mobile cuts, any silent loop	90 seconds in 16:9 for the page, plus a 9:16 cut for social
Sound	Whether the video has to work completely on mute	The page version has narration; the social cut must work muted
Accessibility	Captions, a transcript, and how key visuals are described	WebVTT captions, a transcript under the player, and the report described in the narration
Success metric	The number that defines success, and its baseline	Clicks on “Book a free site check”, compared with the four weeks before launch
Approvals	One name for the script and one for the final cut	Script: account lead. Final cut: studio owner

The technical deliverables, such as a high-quality master, web-compressed files, a poster frame and caption files, go in the same brief so they are quoted with the edit instead of requested afterwards. The speed section below explains why each one matters.

Script for the Page, Not for a TV Spot

A website video script has a different job from an ad. The visitor already chose your page, so you are not fighting for attention in a cold feed. You are confirming they are in the right place and answering the question that brought them there.

For a 60 to 90 second explainer, this structure works for most service and product pages:

• 0 to 5 seconds: name the visitor’s problem in their own words. This is the part people judge before deciding to keep watching, so it has to make sense without sound.
• 5 to 20 seconds: show what the problem costs them in time, money or hassle.
• 20 to 55 seconds: show how your product or service solves it. Show it working rather than listing features.
• 55 to 75 seconds: proof. A result, a customer, a number you can back up.
• Final 10 to 15 seconds: one call to action, in the same words as the button under the player.

Then count words. A common rule of thumb in voiceover work is 140 to 160 spoken words per minute. Leave room for pauses and for moments where the picture does the talking, and a 60-second script lands at about 130 to 150 words, while a 90-second explainer video script lands at about 200 to 230. If the draft runs to 400 words, the fix is cutting points, not reading faster.

Write for viewers who start on mute, and for viewers who cannot see the screen. A line like “as you can see here” gives a blind viewer nothing. The W3C guide to making audio and video media accessible advises planning accessibility from the very start, because describing key visuals inside the main narration, which it calls integrated description, has to be written into the script before filming. Get that right and you may not need a separate audio-described version later.

Two more habits keep a script useful for years. Leave out prices, dates and phrases like “new this season”, which force a reshoot the moment they change; put those details in the page copy, where updating them costs one edit. And skip “visit our website” in a video that already lives on your website.

Example: a 90-second explainer video script

Here is that structure applied to the care plan video from the brief above. It is laid out the way two-column video scripts usually are, with what is on screen beside what is said. The narration runs to just under 200 words, which leaves the end card time to sit on screen.

Time	On screen	Narration
0:00 to 0:05	A phone showing an error page, with the caption “Your website broke again?”	If your website breaks every time a plugin updates, you are not alone.
0:05 to 0:20	A business owner reading a customer email about a contact form that does not work	Most small business owners find out their site is down from a customer. By then the contact form has been silent for days, and nobody can tell how many inquiries went missing.
0:20 to 0:55	Screen recording of updates running on a staging copy, then the weekly report	Our care plan puts a person on it before that happens. Every week we update WordPress, your theme and your plugins on a copy of your site first, check the pages that matter, and only then push the changes live. If something breaks, we roll it back before your visitors see it. Backups run every night and are stored away from your server. On screen now is the report you get every Monday: each update, each check and anything we fixed, written in plain language.
0:55 to 1:15	A real client on camera at work, with name and business in a caption. Use a result you can verify.	Maria runs a dental practice we look after. Last month her site had fourteen updates. One of them failed on our test copy, so we fixed it there first, and her patients never saw a broken page. She reads the report in two minutes on Monday morning.
1:15 to 1:30	End card with the words “Book a free site check” and nothing after it	Want to see what your own Monday report would look like? Book a free fifteen-minute site check below.

Look at the third row. The narration says what the report shows, so a viewer who cannot see the screen still gets the point. That is integrated description in practice, and it costs nothing when it is written in at this stage. The fourth row is a slot for a real, verifiable client result: plan the question you will ask, but never script the customer’s answer for them.

Storyboard the Shoot Around the Layout

Web designers and video teams often work in separate rooms, and it shows. The footage arrives in the wrong aspect ratio, the subject sits exactly where the headline needs to go, or the clip has no clean loop point.

The fix is to share the wireframe before production starts. A good crew will frame shots with negative space for text, capture extra footage for loops, and deliver both horizontal and vertical versions so the same shoot covers desktop, mobile and social. The strongest briefs include the page mockup, the exact placements and the aspect ratio each one needs.

A video storyboard does not need to be pretty. Stick figures sketched on a printout of the wireframe beat a polished mood board that ignores the page. For each shot, mark:

• where the headline, button and captions will sit, so the subject stays clear of those zones
• the desktop crop and the mobile crop, drawn on the same frame
• the loop in and loop out points for any background clip
• the poster frame visitors will see before they press play
• the B-roll needed to cover cuts and to build the silent loop

Then turn the storyboard into a shot list: the location, the people needed, the props or screens to record, and the page each shot is for. One well-organized shoot day can then cover the homepage, the service pages and the social cut-downs, which is usually where a video budget is won or lost.

In-House, Freelancer or Production Company: Who Should Make It

Not every website video needs a crew. The right choice depends on what the video has to prove and how often it will need updating.

• In-house, with a phone and a decent microphone: fine for help center walkthroughs, quick team updates and screen-recorded demos, where clarity matters more than polish. Bad audio gives amateur video away faster than bad lighting, so buy a lapel mic before anything else.
• A freelancer: a good fit for testimonials and short explainers when you can own the brief, the script and the approvals yourself.
• A production company: worth the budget for the homepage, the main service explainer and anything that will also run in paid campaigns, or when you need a crew, lighting, locations and several cuts from one shoot day.

Whether you hire a video production company in Dallas or a freelancer three time zones away, settle these points before the quote is signed:

• Will they work from your wireframe and include the vertical cuts and the silent loop in the same quote?
• Are captions and a transcript included, and in which file format?
• Who owns the raw footage, and can you re-edit it later without them?
• Does the music license cover your website, social posts and paid ads, and for how long?
• Will everyone on camera sign a release that covers web and advertising use?
• How many revision rounds are included, and at which stages: script, rough cut, final cut?

Straight answers to those six questions usually tell you more about a production partner than the showreel does.

Editor’s note: the Dallas studio linked above is mentioned as one example of a video production company. It is not an endorsement, and we have no commercial relationship with it.

Plan for Speed, Accessibility and Search Before the Shoot

Video is the heaviest asset most sites will ever load, and a slow page undoes whatever the video was meant to achieve. Most of the fixes are planning decisions rather than code, so make them now:

• choose the poster frame during the storyboard, because that still image is what visitors see before anything plays
• decide which videos load only when someone clicks, which covers almost every narrated video below the first screen
• stream longer videos from a platform built for it instead of the Media Library, and keep self-hosting for short silent loops

Our guide to adding custom video to WordPress without slowing your site walks through each one, with file size targets for background loops, a pause button example and GA4 tracking.

Captions are not optional. Many visitors watch with the sound off, and captions make the content usable for people who are deaf or hard of hearing. Ask for caption files as a deliverable instead of relying on automatic captions, which tend to mangle product names and technical terms.

Add a transcript or a short written summary beside important videos too. It helps visitors who prefer to skim, and it gives search engines and AI assistants text they can read and quote, which a video file on its own does not. Write that summary as a self-contained passage that names its own subject, the same approach we recommend for making pages readable by AI assistants.

One planning decision affects search directly. According to Google’s video SEO best practices, video features such as video thumbnails and key moments are reserved for pages where the video is the main content. A testimonial supporting a service page will rank as part of that page, not as a video result. If a video needs to be found in search on its own, plan a dedicated watch page for it with its own title, description and transcript, then embed the same video on the sales page where it supports the conversion.

Write the Call to Action Into the Video

The last few seconds of a video are prime real estate. If the page asks visitors to book a consultation, the video should end on that same request, and the button should sit directly below the player. Consistent messaging between the video, the copy and the button removes friction at the exact moment a visitor is most engaged.

Plan the end card in the storyboard, not in the edit: the exact button wording, on screen long enough to read, and nothing after it that pulls attention away. That includes the suggested videos a standard YouTube embed shows when playback ends, which can lead a visitor off your page at the very moment you asked them to act.

For anything longer than about two minutes, mention the same video call to action once in the middle as well, because a good share of viewers will never reach the end.

If the video does its job and the page still does not convert, the problem usually sits elsewhere on the page. Our list of common landing page design mistakes is the next place to look.

Decide How You Will Measure It Before Launch

Play counts are a vanity metric on their own. Decide in the brief which number defines success, then record a baseline for a few weeks before the video goes live. Without one, any result after launch is a guess.

Track what visitors do after watching: clicks on the call to action, form submissions and scroll depth past the player. Set those up as key events in GA4 before launch, because GA4 only reports a key event from the moment you mark it, the same before-and-after trap our website redesign checklist warns about. Leave autoplaying loops out of play-rate reports, since they “play” without anyone choosing to.

The cleanest answer comes from a test: the same page with and without the video, or with two different thumbnails. If a video is not moving the number in your brief, test a shorter cut, a different thumbnail or a new placement before you write video off.

Website Video Planning Checklist

• The video has one job, one audience and one call to action.
• The format and length match the page it sits on.
• A one-page brief is signed off, including the success metric and a pre-launch baseline.
• The script fits its word budget and makes sense on mute.
• Key visuals are described in the narration, and captions and a transcript are on the deliverables list.
• The storyboard was drawn on the real wireframe, with desktop and mobile crops marked.
• Background loops are silent, have a clean loop point and a planned pause control.
• Footage ownership, music licensing and on-camera releases are agreed in writing.
• The end card matches the button text exactly.
• Key events are tracked before launch, and someone is named to read the report.

Plan the Page First, Then the Video

Video works best on a website when it is designed into the page instead of added at the end. Good website video planning comes down to a handful of decisions made early: the job, the format, the brief, the script, the storyboard and the number that defines success. Make those before the shoot, and video stops being decoration and starts doing real work for the business.

How We Put This Guide Together

This guide was written by Claudio Pires, co-founder of Visualmodo, who oversees video for the Visualmodo YouTube channel. The planning lengths and word counts are working rules of thumb from video and voiceover practice, not results from a single study, so test them against your own data. The accessibility, autoplay and video search guidance follows W3C, MDN and Google documentation, linked where each point is made. The care plan brief and script are a hypothetical example written for this guide.

Website Video Length, Scripts, Autoplay and Production: Quick Answers