Gallery · Videos

A row of video posters; each one plays its video in a lightbox where you can go to the previous or next video.

See it live: Gallery · Videos 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.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the videos open in their lightbox only on the front end (in the builder the cards are plain links). Save and open the page to see the full result.

Structure

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

Video gallery
  Container
    Intro   (FBK Intro)
    Videos
      Video · Big Buck Bunny   (FBK Video card)
      Video · Spring   (FBK Video card)
      Video · Tears of Steel   (FBK Video card)
      Video · Cosmos Laundromat   (FBK Video card)
    Video lightbox   (FBK Video lightbox)

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
• Title tag
• Meta: Length, author or category.

Style

• Hide meta
• Proportion
• Hover: Zoom: the poster comes closer, the disc grows, the title and meta rise and the title is underlined.
• 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).
• Tone: Brand: your accent color. Neutral: the text color around it. White: the same on every background, for controls over photos.
• Shape: Round: a circle on icons, a pill on text. Blob: a bubble that turns round on hover (icons).
• HTML tag: li inside a list of videos; div anywhere else.

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 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.
3. Select Video · Big Buck Bunny, Video · Spring, Video · Tears of Steel (+1 more) (FBK Video card) › Properties: Video, Poster, Title, Title tag, Meta · Style group: Hide meta, Proportion, Hover, Look, Tone, Shape, HTML tag.
4. Select Video lightbox (FBK Video lightbox) › its content is in the elements inside it.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• For each FBK Video card: the video address (link type External URL: YouTube, Vimeo or an .mp4), a poster (a frame of the video), the title and the length. The test videos are Blender Foundation films (CC BY): replace them, or credit the Blender Foundation if you keep them.
• Columns are in .fbk-vidgal (4, 2 on tablets and phones). The hover zoom is the class fbk-vcard--zoom (Hover on each card); remove it for still posters.
• The videos play in FBK Video lightbox, the component after the list (in the same block): previous and next, the arrow keys, a counter, Esc or a click outside to close. It needs "Execute code"; without it each card opens its video on YouTube.

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-vidgal, .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-atomic, aria-hidden, aria-label, aria-live).

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--light, fbk-section--soft, fbk-section--dark.

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

Replaces

• 01 - Video Gallery (YouTube) from Fancy Bricks 1.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.