webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Video Testimonial Card — Free HTML CSS JS Snippet

Video Testimonial Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsKeyboard NavigationSVGCSS AnimationMedia PlayerLanding Page

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Load-on-play performance
The card shows only a poster; the heavy video player loads on demand, so visitors who never press play download nothing.
Pulsing play button
A CSS ::before ring expands and fades on a loop for an inviting "tap to play" cue with no JavaScript.
Quote overlay
The customer's key line sits over the poster with a gradient shade for legibility, so the message lands even without playing.
Hover zoom
The thumbnail scales and the play button grows on hover for a tactile, alive card.
Stop-on-close
Closing removes the player so playback stops and the resource is freed — no background buffering or tracking.
Keyboard and focus
Escape closes the player, and focus moves to the close button on open and back to the poster on close.
Author trust row
A gradient avatar, name, truncating role, and star rating attribute the testimonial to a real person.
Responsive media
A 16/10 aspect-ratio media area scales cleanly to any card width.

About this UI Snippet

Video Testimonial Card — Poster, Lazy Load-on-Play and Quote Overlay

Screenshot of the Video Testimonial Card snippet rendered live

Video testimonials convert better than text — seeing a real customer say it is more persuasive than reading it — but embedding a video player on a marketing page is heavy: the player iframe loads hundreds of kilobytes whether or not anyone presses play. This component gives you the best of both: a lightweight poster card with a thumbnail, a pulsing play button, a duration badge, and a pull-quote overlay, that only swaps in the actual player when the visitor clicks play. It is built in HTML, CSS, and vanilla JavaScript, and the load-on-demand pattern is the key performance idea.

The poster, not the player, loads first

By default the card shows only a poster: a gradient (or image) thumbnail, a dark gradient shade for text legibility, a circular play button, a "1:24" duration badge, and the customer's strongest quote overlaid at the bottom. None of this loads any video. The real player markup lives in a sibling element that starts with the hidden attribute, so it contributes nothing until needed. Clicking the poster reveals the player and hides the poster; in production this is exactly where you would inject the real <iframe> or <video> so the heavy resource only downloads on demand — turning a multi-hundred-KB embed into a near-zero-cost card for the majority of visitors who never press play.

The pulsing play button

The play button is a white circle with an indigo triangle, centred over the poster. A ::before pseudo-element draws an expanding ring around it with the vtcRing keyframe — scaling from 1 to 1.5 while fading out, on a 2.4-second loop — the gentle "tap me" pulse you see on video cards across the web. On hover the whole button scales up slightly and the thumbnail behind it zooms with a transform: scale(1.05), giving the card a tactile, alive feel without any JavaScript.

Quote overlay and legibility

The customer quote sits over the bottom-left of the poster in bold white with a text-shadow, and a linear-gradient shade darkens the lower portion of the thumbnail so the text stays readable over any image. This means the card communicates the testimonial's punchline even before anyone plays the video — a visitor who only skims still gets the message. The duration badge in the opposite corner sets expectations about the time commitment.

Load-on-play and stop-on-close

Clicking play calls openPlayer(), which hides the poster, shows the player, and moves focus to the close button. Closing (via the X or the Escape key) calls closePlayer(), which hides the player, restores the poster, and returns focus to it. The comments mark the two production hooks: inject the real video element in openPlayer so it loads only when requested, and remove it in closePlayer — removing the node is the simplest reliable way to stop playback and free the resource, because a paused-but-present YouTube/Vimeo iframe can keep buffering and tracking. Escape-to-close and focus management make the player usable by keyboard.

The author meta row

Below the media, a meta row shows a gradient initials avatar, the customer's name and role (the role truncates with ellipsis so the row never wraps), and a five-star rating. This grounds the testimonial with a credible, attributable source — the same trust signals a written testimonial card uses, paired here with the higher-impact video.

Customisation

Replace the gradient .vtc-thumb with a real poster image, set the quote, duration, avatar, name, role, and star count, and in openPlayer() inject your provider's embed (a YouTube/Vimeo <iframe> with autoplay=1, or a self-hosted <video autoplay>). Swap the #6366f1 accent for your brand. The card is fully responsive with a 16/10 aspect-ratio media area that scales to its container.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSA testimonial card renders with a video poster, a pulsing play button, a duration badge, an overlaid quote, and an author row.
  2. 2
    Hover the posterThe thumbnail zooms slightly and the play button scales up; an expanding ring pulses around the button continuously.
  3. 3
    Click playThe poster is replaced by the player area (where the real video would load on demand) and focus moves to the close button.
  4. 4
    Close the playerClick the X or press Escape; the poster returns and focus moves back to it.
  5. 5
    Add your real videoIn openPlayer(), inject your YouTube/Vimeo <iframe> or <video> so it loads only on play; remove it in closePlayer() to stop playback.
  6. 6
    Set the contentReplace the poster image, quote, duration, avatar, name, role, stars, and accent colour with your testimonial.

Real-world uses

Common Use Cases

Landing-page social proof
Lead with a customer's video over text testimonials for higher conversion — pair with a testimonial carousel of written quotes below.
Case-study and customer-story pages
Embed a short customer clip with their key result as the overlay quote; complement with a pull quote in the body.
Course and creator landing pages
Show a student success story without slowing the page, since the player only loads on play.
Product and SaaS marketing
Feature a customer explaining the value, grounded by their role and company; pair with a testimonial card wall for written quotes.
Webinar and event recaps
Use the poster-and-play pattern for highlight clips with a duration badge setting expectations.
Learning lazy-embed patterns
A reference for load-on-demand video, the pulsing play affordance, and accessible open/close with focus management.

Got questions?

Frequently Asked Questions

In openPlayer(), set the player's innerHTML to an iframe with autoplay, e.g. player.innerHTML = '<iframe src="https://www.youtube.com/embed/ID?autoplay=1" allow="autoplay" ...></iframe>' plus your close button. Building the iframe only on click is the whole point — it keeps the page light. In closePlayer(), clear that innerHTML (or remove the iframe) so the video stops and frees bandwidth.

A YouTube or Vimeo iframe that is merely hidden or paused can keep buffering, playing audio, or sending tracking pixels in the background. The most reliable cross-provider way to truly stop it is to remove the iframe from the DOM. That is why closePlayer() restores the poster and you clear the player markup there — it guarantees playback ends and the resource is released.

Replace the .vtc-thumb gradient background with background-image: url('poster.jpg') and background-size: cover, or use an <img> with object-fit: cover inside the poster button. Keep the .vtc-shade gradient overlay so the quote text stays readable over a busy image. Use your video's own thumbnail for the most relevant poster.

The poster is a real <button> with an aria-label, so it is focusable and announced as "Play testimonial video." On open, focus moves to the close button; on close (via the X or Escape), focus returns to the poster. The star rating has an aria-label describing the score. When you inject a real player, ensure the iframe has a descriptive title attribute for screen readers.

Hold a playing boolean in state; render the poster when false and the player (with the real embed) when true. The play button sets playing true, the close button and an Escape key handler set it false. Manage focus with refs in an effect that runs when playing changes. Conditionally rendering the player means the embed mounts on play and unmounts on close automatically — the framework gives you the load-on-play and stop-on-close behaviour for free.

Source Code

<div class="vtc-card" id="vtcCard">
  <button class="vtc-poster" id="vtcPoster" type="button" aria-label="Play testimonial video">
    <span class="vtc-thumb" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)"></span>
    <span class="vtc-shade"></span>
    <span class="vtc-play"><svg viewBox="0 0 24 24" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4"/></svg></span>
    <span class="vtc-duration">1:24</span>
    <span class="vtc-quote">&ldquo;It paid for itself in the first week.&rdquo;</span>
  </button>

  <div class="vtc-player" id="vtcPlayer" hidden>
    <div class="vtc-fakevideo" id="vtcFake">
      <span class="vtc-pulse"></span>
      <span class="vtc-now">Now playing…</span>
    </div>
    <button class="vtc-close" id="vtcClose" type="button" aria-label="Close video">
      <svg viewBox="0 0 24 24" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>

  <div class="vtc-meta">
    <span class="vtc-avatar">RL</span>
    <div class="vtc-author">
      <span class="vtc-name">Rosa Lambert</span>
      <span class="vtc-role">Operations Lead, Brightwave</span>
    </div>
    <div class="vtc-stars" aria-label="5 out of 5 stars">★★★★★</div>
  </div>
</div>
Design your website