Skip to Content

Demo

HubSpot Video Gallery Module

Available on the HubSpot Marketplace

Documentation

video-gallery-thumbnail__800x600

The HubSpot Video Gallery Module

Features:

  • Can be used on any HubSpot website. Automatically adapts to the styling of any HubSpot Theme you're using, whether it's from the Marketplace or custom built. 
  • Supports HubSpot Video, HubSpot Files/Media Bridge, YouTube and Vimeo. Your galley can be composed of any of these video types. Mix and match videos from different sources!
  • Supports Schema/Structured Data. Enable this feature to provide search engines with extra data which may help your videos appear as rich results. The module uses the VideoObject and ItemList structured data.
  • Highly Customizable. Don't like the default styling? Customize it! Read below for more details on all the customization options available.

Module Live Demo

The Video Gallery module can be added to any HubSpot theme and will automatically adapt to your website's styling. Below is a live example of what the module first looks like when added to this particular theme. 

Scroll down to see what it looks like when customized!

Sample Image
Category
00:05:01

Title of the Video (HubSpot File)

A brief description of what the video shows.
Dec 31, 2022
Sample Image
Category
00:05:01

Title of the Video (HubSpot Video)

A brief description of what the video shows.
Dec 31, 2022
Sample Image
Category
00:05:01

Title of the Video (YouTube)

A brief description of what the video shows.
Dec 31, 2022
Sample Image
Category
00:05:01

Title of the Video (Vimeo)

A brief description of what the video shows.
Dec 31, 2022

Adapts to any HubSpot Theme

Below are some examples of what the module first looks like when used on other themes. The title automatically pulls in that theme's Heading 3 (H3) styling and the description it's text styling.

Video Gallery Demo on the Bold Theme

Bold Theme

Video Gallery Demo on the Community Minded Theme

Community Minded Theme

Video Gallery Demo on the Foodie Theme

Foodie Theme

Video Gallery Demo on the Accelerator Theme

Accelerator Theme

Limitless Configurations

With endless configuration options, you can use the Video Gallery module to make all sorts of layouts. Check out some live examples below.

Vertical Video / Shorts / Reels

The example below reduces the space between video cards, adds rounded corners to the preview image, sets its aspect ratio to 9:16 (Vertical), sets the video to vertical, hides all information except for the thumbnail and title and customizes the title's font.

Grid

The example below switches the layout to three cards per row, adds rounded corners and a background colours to the cards, sets the play icon to always show and updates the hover colour, adds padding to the details section and customizes the title's font.

Beach
Nature
00:00:23

Beach

Beach
Space
Nature
00:00:28

Space

Space
City
Urban
00:00:08

City

City
Keyboard
Work
00:00:50

Keyboard

Keyboard
Water
Nature
00:00:44

Water

Water
City
Urban
00:00:10

City

City

Edge to Edge

The example below removes spacing around the cards, sets the play icon to always show and updates the play icon colour.

Beach
Space
City
Keyboard
Water
City
Beach
Trees

Configuration Options

Below is a list of all the customization options available for the Video Gallery module.

Content: 

  • Videos (repeater, add as many as you need!)
    • Details
      • Title (text)
      • Description (text)
      • Upload Date (date)
      • Duration (text)
      • Category (text)
    • Video
      • Type (choice) - Choose between HubSpot File / HubSpot Video / YouTube / Vimeo
      • Video - add the video according to the type selected above.
    • Thumbnail
      • Thumbnail (image)
  • Schema/Structured Data
    • Enable Schema (boolean)
  • Advanced
    • Custom CSS Class (text)
    • Upload Date - Format (text)
  • Default Text
    • Close Button (text)

Styles:

  • Display Settings (choose which items to display)
    • Display Category
    • Display Duration
    • Display Title
    • Display Description
    • Display Upload Date
  • Layout
    • Cards Per Row (Large Screens ≥992px)
    • Cards Per Row (Medium Screens ≥768px)
    • Cards Per Row (Small Screens <768px)
  • Cards
    • Background
      • Color
    • Corner
      • Radius
    • Spacing
      • Padding
      • Space Between Cards
  • Details
    • Spacing
      • Padding
    • Category
      • Animation
        • Always Show 
      • Text
        • Font
    • Duration
      • Animation
        • Always Show 
      • Text
        • Font
    • Title
      • Text
        • Heading Level (H1 - H6)
        • Font
    • Description
      • Text
        • Font
    • Upload Date
      • Text
        • Font
  • Thumbnail
    • Corner
      • Radius
    • Size
      • Aspect Ratio (16:9 (Widescreen), 9:16 (Vertical), 1:1 (Square), 4:3 (Fullscreen), 21:9 (Cinematic Widescreen))
  • Play Icon
    • Animation
      • Always Show
    •  Background
      • Color
      • Color (On Hover)
    • Icon
      • Color
      • Color (On Hover)
  • Modal/Pop-Up
    • Overlay
      • Background
        • Color
    • Close Button
      • Fill
        • Color

Find the Video Gallery Module on the HubSpot Marketplace!

Download | Documentation

Contact

Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS