Video Galleries: the Complete Guide

A video gallery puts several videos on one page or in one embed: a carousel on your homepage, a wall of love on your testimonials page, a list in a case study. Build it once in Vocal Video, embed it anywhere, and every copy updates when you add videos.

A Vocal Video wall gallery embedded on a web page: eight customer video cards in columns, each with a featured quote and the speaker's name and title

In this article:

Create a gallery

  1. Click Galleries in the left menu, then create a new gallery.
  2. Choose a layout: Slideshow, Carousel, Wall, Grid or List. See Choose a layout for help deciding.
  3. Give it an Internal Title that only your team sees, and click the create button.

The Create a Video Gallery window, with five gallery types to choose from: Slideshow, Carousel, Wall, Grid and List

The gallery opens in the editor, with Videos, Design and Title tabs on the left and a live preview on the right.

The gallery editor with the Videos, Design and Title tabs marked, an Add Videos button and the gallery's videos listed on the left, and a live preview on the right

Add videos

  1. On the Videos tab, click Add Videos.
  2. Pick from Videos (your published videos) or Uploads (video files you've uploaded). Search and filter to find the ones you want, and select as many as you like.
  3. Click Add videos.
  4. Drag and drop videos in the list to change their order.

The Add Videos window, with the Videos and Uploads sources marked on the left and a list of published videos to choose from

Give each video a featured quote. Carousel, slideshow, wall and list layouts can show each video's featured quote, and a video without one appears without a quote. To add or change one, hover over the quote in the preview and click Edit Featured Quote, or see Choose a featured quote.

Choose a layout

Pick the layout by where the gallery will go. You choose it when you create the gallery; to change it later, ask Vera, and your videos and design carry over.

Layout Shows Good for
Carousel 2 to 5 videos at a time, scrolling sideways A homepage or product page section
Slideshow One video at a time, with its quote A hero section, or a narrow space
Wall Every video and quote at once, in columns A testimonials page or wall of love
Grid Video thumbnails in rows, like a YouTube channel A video library or resource page
List One video per row, beside its quote A case study or long-form page

The examples below are live: play any video.

A carousel shows 2 to 5 videos side by side, and visitors scroll for more. It's the most compact way to show many videos.

Carousel settings on the Design tab:

  • Video Cards: video only, quote below the video (left-aligned or centered), or transparent with no card background.
  • Columns: 2 to 5 videos at once. On smaller screens it shows fewer.
  • Card Height: makes every card the same height. Very long quotes may be cut short.
  • Carousel Settings: an Effect (none, magnify or 3D), Autoplay to advance every 2 to 10 seconds, and Looping. Magnify and 3D look best with 3 columns and looping on.
  • Navigation Arrows: dark or light, to suit your background.

Slideshow Galleries

A slideshow shows one video at a time, with its featured quote, and visitors click through. It gives each testimonial the whole stage.

Slideshow settings on the Design tab:

  • Video Cards: video only, video beside the quote, video overlapping the quote (inset), or transparent with no card background.
  • Alternate left/right alignment: switches the video between the left and right side from slide to slide.
  • Card Height: makes every slide the same height. Very long quotes may be cut short.
  • Slideshow Settings: an Effect (none, magnify, 3D or flip), Autoplay to advance every 2 to 10 seconds, and Looping.
  • Navigation Arrows: dark or light.

Walls of Love

A wall, or "wall of love," shows every video and quote at once in staggered columns, so visitors can scan the quotes and play the ones that catch their eye. The gallery at the top of this article is a wall.

Sayvant shows its physician testimonials as a wall on its homepage, in its own brand colors:

Sayvant's homepage, with a wall gallery of physician video testimonials on dark cards, each with a featured quote highlighted in Sayvant's peach accent color

Wall settings on the Design tab:

  • Video Cards: video only, quote below the video (left-aligned or centered), or transparent.
  • Columns: 2 to 5. On smaller screens it shows fewer.

Grid Galleries

A grid shows video thumbnails in even rows, without quotes. Use it when there are many videos and the thumbnails speak for themselves.

Grid settings on the Design tab:

  • Video Titles: show each video's title and publish date under its thumbnail.
  • Columns: 2 to 5. On smaller screens it shows fewer.
  • Thumbnails: on Auto, every thumbnail takes the shape of the first video. Choose square, portrait or landscape to set it yourself.

List Galleries

A list stacks videos one per row, each beside its featured quote. It reads like a page of testimonials, and suits long pages that visitors scroll through.

List settings on the Design tab:

  • Video Cards: video only, video beside the quote, video overlapping the quote (inset), or transparent.
  • Alternate left/right alignment: switches the video between the left and right side on each row, as in the example.

The Detroit Economic Club uses a list with transparent cards on its membership page, so the quotes sit right on the page:

The Detroit Economic Club membership page, with a list gallery that alternates member videos and their quotes from left to right, with no card background

Horizontal cards in slideshows and lists switch to a vertical layout when they're less than 640 pixels wide, so they still work on phones.

Design options for every layout

The gallery editor's Design tab, with its Video Cards, Slideshow Settings, Thumbnails, Colors, Fonts, Logo, Corners & Shadows, Layout and Background sections marked, beside a live preview

These settings on the Design tab work the same way in every layout:

  • Quotation Marks, Featured Quote Text Size (XS to XXL) and Show attributions: how quotes and the speaker's name and title appear. (Not in grids, which don't show quotes.)
  • Thumbnails: make every thumbnail square, portrait or landscape, or leave it on Auto.
  • Colors: the gallery title and description, the featured quote, the Quote Accent Color (quotation marks and bold words), attribution text, and the card background, with an optional gradient.
  • Fonts: one font for headings and quotes, and one for smaller text. These don't change text inside your videos. The full font library is available on Pro, Scale and Enterprise plans.
  • Logo: top left, above the title, or none. Your logo comes from your brand kit.
  • Corners & Shadows: square to fully rounded corners, and no shadow, small or large. (Carousels and slideshows have no large shadow.)
  • Layout: Title Alignment left or centered, and a Max Width from 600 to 1600 pixels. We recommend leaving Max Width on auto.
  • Background: brand colors, gradients and photos. The background shows on the gallery's public page, not in embeds, which take on your website's background.

To set your brand's colors and fonts, see Customizing Fonts in Videos, Galleries, and Card Embeds.

Title and description

On the Title tab, add a Public Gallery Title and Public Gallery Description. They show at the top of the gallery's public page. Embedded galleries leave them out, so you can write your own heading on your site.

Share and embed a gallery

  • Embed it: click Embed at the top of the editor, then Copy Embed Code, and paste it into your site. Click Preview the embed first to see it as an embed. See Where to Paste Embed Codes.
  • Link to it: click the link icon to copy the gallery's public page link, or click Share for X, Facebook and LinkedIn.

An embedded gallery updates by itself when you add, remove or reorder videos, change the design, or republish a video in it. You never need to replace the code.

See how many people viewed a gallery by clicking its view count next to the title. For more, see Video and Gallery Stats and Account Analytics.

Build a gallery with Vera or your AI assistant

Vera, the assistant in Vocal Video, can build and update galleries for you, and so can Claude, ChatGPT or another AI assistant connected to Vocal Video. Ask in plain language:

  • "Make a carousel of our five most-viewed customer videos."
  • "Add the videos I published this month to the homepage gallery."
  • "Swap out anything older than a year in the testimonials wall for our newest videos."
  • "Turn the testimonials gallery into a wall with three columns and a dark background."
  • "Make the homepage gallery unlisted, so it isn't indexed by search engines."

To connect Claude, ChatGPT or another assistant, see Integrations and Automation: the Complete Guide.

For more information see:

Still need help? Contact Support at support@vocalvideo.com