Testimonials · Video

A video testimonial on one side (a tall poster that opens the video in a lightbox) and two short written quotes on the other.

See it live: Testimonials · Video on fancybricks.co — the live preview, and the button that copies it.

Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Testimonials · Video
  Container
    Video
      Video · Daniel Brooks   (FBK Video card)
    Text
      Intro   (FBK Intro)
      Quotes
        Quote · Owen Patel   (FBK Quote)
        Quote · Peggy Hopkins   (FBK Quote)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

FBK Video card

This template is built on its own component, FBK Video card: select it in the Structure panel and everything below is in its Properties.

A video poster with a play disc and its title; it opens the video in the Bricks lightbox. Put several in a list (ul) for a video gallery.

FBK Video card in the Bricks panel: its own properties are at the top.

• Video: A YouTube or Vimeo address, or an .mp4 file. External URL with an FBK Video lightbox beside the cards: it plays there (previous / next). Lightbox video: it plays in the Bricks lightbox (one by one). Without JS the link opens the video.
• Poster: A frame of the video. Decorative: the title names the link.
• Title: The video's name; also the link's name for screen readers.
• Title tag: H3 or H4 inside a heading outline; Paragraph when the card has no heading role. Options: H3 · H4 · Paragraph.
• Meta: Length, author or category.

Style

• Hide meta: Hides the meta line under the title.
• Proportion: The poster's crop shape: 3:4 portrait, 16:9 widescreen or 1:1 square. Options: 3:4 · 16:9 · 1:1.
• Hover: Zoom: the poster comes closer, the disc grows, the title and meta rise and the title is underlined. Options: Zoom · None.
• Look: Plain: no box. Soft: a tinted box that fills on hover. Outline: a thin edge that fills on hover. Solid: filled. Elevated: a raised surface with a small shadow. The same looks as every Fancy Bricks component (and the buttons: Ghost, Secondary, Outline, Primary). Options: Plain · Soft · Outline · Solid · Elevated.
• Tone: Brand: your accent color. Neutral: the text color around it. White: the same on every background, for controls over photos. Options: Brand · Neutral · White.
• Shape: Round: a circle on icons, a pill on text. Blob: a bubble that turns round on hover (icons). Options: Rounded · Round · Square · Blob.
• HTML tag: li inside a list of videos; div anywhere else. Options: li · div.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Video · Daniel Brooks (FBK Video card) › Properties: Video, Poster, Title, Title tag, Meta · Style group: Hide meta, Proportion, Hover, Look, Tone, Shape, HTML tag.
3. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
4. Select Quote · Owen Patel, Quote · Peggy Hopkins (FBK Quote) › Properties: Quote, Name, Role or company, Avatar, Rating, Date · Show or hide group: Hide avatar, Hide stars, Hide role or company, Hide date · Style group: Look, Tone, Shape, Layout, Stars tone, Avatar shape, Alignment, Background.

Finish by hand

• The video is an FBK Video card: set the video address (YouTube, Vimeo or an .mp4) in its link (Lightbox video), a poster (a frame of the video), the title and the length. The test video and its poster are a stock clip from Pexels (free to use): replace both with your own.
• The two quotes are FBK Quote cards (Look Outline, Tone Neutral). Add a third by duplicating one.
• The poster is 3:4 next to the text and 4:3 on tablets and phones (.fbk-tvideo__media, Style > CSS in its tablet settings).
• Hover on the quotes: none in the demo, because they have no link. Add a link or a button to a quote and it rises and its border takes the brand color (class .fbk-tvideo--lift on .fbk-tvideo, Style > CSS: %root% .fbk-quote:has(a[href], button):hover). The zoom on the poster is the card's own Hover property.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-tvideo__media, .fbk-intro.
• 767px and below — .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--soft, fbk-section--light, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.