React Testimonial Video Card

A written quote with a face and a video behind it. The embed does not load until someone presses play — which is faster, and the only version that is honest about who they are connecting to.

We budgeted a year for the migration and finished the first region in six weeks. The part that surprised us was that nothing else had to change.
Dana WhitlockDirector of Grid Security · Northfield Grid Operations

38×

Faster key rotation — 11 weeks down to 2 days

Installation

npx shadcn@latest add "https://kelvinui.com/registry/testimonial-video.json"

Props

PropTypeDescription
quotestringThe pull quote
authorstringAttribution — never omit
role companystringWho they are
videoUrlstringEmbed URL, mounted only after a click
posterUrlstringPoster image; falls back to a gradient
durationstringRuntime label
stat{ value, label }Headline result beside the quote
providerstringNamed in the click-to-load notice

Click-to-load is the whole point

An auto-mounted YouTube or Vimeo iframe issues third-party requests and sets cookies on page load. On a marketing page that means before the visitor has answered your cookie banner — so the consent banner is decorative and the page is in violation the moment it renders.

Here the <iframe> is not in the tree until playing is true. The poster state tells the viewer exactly what will happen and who they will connect to (provider), which is both the compliant behaviour and the courteous one. The demo uses youtube-nocookie.com, which is the better default even behind a click.

The side benefit is performance: a single embed is often several hundred kilobytes and a dozen requests. Not loading it is the cheapest optimisation available on a testimonial section.

Attribution is not optional

A quote without a name, role, and company is worth less than no quote — readers assume you wrote it. If a customer cannot be named, publish the role and industry ("Director of Grid Security, European utility") rather than dropping attribution entirely.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.