---
title: Video Hero, Gallery & Popup Pro — Video Module for HubSpot
description: A video module for HubSpot CMS. A background video hero, a video section with chapters, captions and a transcript, and a video library as a grid, a slider or a playlist, with a lightbox player and video structured data.
---

[![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website)

HubSpot CMS module

# Video Hero, Gallery & Popup Pro

A background video behind your headline, a video beside your copy with chapters, captions and a transcript, and a whole library as a grid, a slider or a playlist. Play YouTube, Vimeo, Wistia, HubSpot video or your own MP4, in place or in a lightbox, and tell Google what each video is.

[Get the module](https://ecosystem.hubspot.com/marketplace/website) [See it live ↓](https://www.nopethemes.com/video-pro#demo-1)

- [Hero](https://www.nopethemes.com/video-pro#demo-1)
- [Sections](https://www.nopethemes.com/video-pro#demo-2)
- [Library](https://www.nopethemes.com/video-pro#demo-6)
- [Slider](https://www.nopethemes.com/video-pro#demo-7)
- [Playlist](https://www.nopethemes.com/video-pro#demo-8)
- [Documentation](https://www.nopethemes.com/video-pro#guide)

Demo 1 · Hero

## A quiet loop behind the headline

A ten-second loop plays without sound behind the text, with a light wash so the words stay readable. Phones get their own upright file, and visitors who ask for reduced motion or save data see the still poster. The button in the corner pauses it. *Watch the full video* opens the long version, with sound, in a lightbox.

- **Job**Hero
- **Source**MP4 file, separate phone file
- **Full video**YouTube in the lightbox

![](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-hero-poster.jpg?width=1920&height=1080&name=video-pro-hero-poster.jpg)

Studio Nope Official

## One HubSpot theme for whatever your business does

Set it up for a clinic, a law firm or a software company with the same templates and modules.

[See the theme](https://www.nopethemes.com/?hsLang=en)

Watch the full video0:10

Pause

escto close

Chapters

TranscriptFollows the video

Files

Demo 2 · Section

## Dropped in, nothing changed

This is the module as it arrives. The text sits on the left, the video plays in place, and under it the transcript opens and follows along. The chapters jump through the video, the English captions come from a caption file, and Google gets the title, poster, length and chapters as structured data.

- **Job**Section
- **Source**MP4 file with captions
- **Opens**In place
- **Text**Left

Product tour

## See how it works in under a minute

Press play for a short overview. Captions, chapters and a transcript sit with the video.

Watch the overview0:10

Captions in English0:10

![A bright open-plan office seen from above](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-hero-poster.jpg?width=1920&height=1080&name=video-pro-hero-poster.jpg)

Watch the overview0:10

TranscriptRead along

0:00

A bright open-plan office, seen from above.

0:04

People work at long shared desks below.

0:07

The view drifts slowly across the floor.

Demo 3 · Section

## Text on the right, video in a lightbox

A YouTube video that loads nothing from YouTube until someone presses play: the cover is YouTube's own thumbnail, and the player opens in a lightbox from the privacy-enhanced domain. The lightbox lists the chapters beside the video and has a share menu.

- **Job**Section
- **Source**YouTube
- **Opens**Lightbox
- **Text**Right

Theme walkthrough

## A wealth management site, page by page

The homepage, a retirement calculator that shows a client what their savings could become, and a fee calculator that answers the question before the first meeting.

1:56

![Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators](https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg)

escto close

Share

Copy link

LinkedInEmail

Chapters

TranscriptFollows the video

Files

Demo 4 · Section

## Text above, a silent loop where a GIF would go

An upright phone clip that plays on its own, without sound, once it scrolls into view and pauses when it leaves. It is sharper than a GIF at a fraction of the size, and the sound button turns the audio on for anyone who wants it.

- **Job**Section
- **Source**MP4 file, 9:16
- **Opens**Silent loop
- **Text**Above

On a phone

## A sign-up that rises from the bottom of the screen

On a phone the newsletter popup becomes a sheet the reader can drag away. The clip loops without sound until you ask for it.

0:30

![A phone with a newsletter sign-up rising from the bottom of the screen](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-short-poster-sheet.jpg?width=540&height=960&name=video-pro-short-poster-sheet.jpg)

Watch the overview0:30

Demo 5 · Section

## Text below, and an end screen

The same bundled tour with the text underneath and a corner play button. Let it run to the end and the frame offers a button to the next page and a replay. Structured data is switched off on this one, so the page does not describe the same video twice.

- **Job**Section
- **Source**MP4 file
- **Opens**In place
- **Text**Below

End screen

## When the video ends, offer the next step

The last frame turns into a heading, a button and a replay, so the viewer has somewhere to go.

Captions in English0:10

![A bright open-plan office seen from above](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-hero-poster.jpg?width=1920&height=1080&name=video-pro-hero-poster.jpg)

Play the tour0:10

Want it on your site?

[See Popup & Modal Pro](https://www.nopethemes.com/popup-modal-pro?hsLang=en)

Replay

Demo 6 · Library

## A video library with tabs, topics and search

Our own product videos as a grid. The tabs come from each video's category and show a count, the topic list from its tags, and the search looks through titles and descriptions as you type. Sort by date, title or length. The first video is featured and takes two columns. One video asks for an email before it plays, and that one form opens every locked video in the library. The live session at the end shows its date, a Register button and calendar links until it starts.

- **Job**Library
- **Display**Grid
- **Source**YouTube
- **Opens**Lightbox

Video library

## Every theme and module, at work

Short walkthroughs of each product, plus tutorials for building and changing a HubSpot site.

All**10**

Themes**4**

Modules**3**

Tutorials**3**

TopicAll topicsFinanceCalculatorsPhotographyGalleriesLibrariesSearchSupportMigrationMulti-purposeNavigationDevelopersSortFeaturedNewestOldestTitle A–ZShortestSearch videos

- ![Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators](https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg)1:56New
  
  ThemesOct 21, 2026
  
  ### Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators, 1:56

    1. 0:00The homepage
    2. 0:38Retirement calculator
    3. 1:12Fee calculator and templates
    - [Open the theme demo](https://www.nopethemes.com/harrington?hsLang=en)
- ![Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar](https://i.ytimg.com/vi/vMfHsZSDffk/hqdefault.jpg)1:47New
  
  ThemesOct 14, 2026
  
  ### Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar, 1:47
- ![Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery](https://i.ytimg.com/vi/N34-OASZBnI/hqdefault.jpg)2:01
  
  ThemesSep 30, 2026
  
  ### Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery, 2:01
- ![Download Center Pro for HubSpot: A File Library with Search, Filters and Multi-File Downloads](https://i.ytimg.com/vi/YxWp1AcSX_k/hqdefault.jpg)1:36Form required
  
  ModulesSep 18, 2026
  
  ### Download Center Pro for HubSpot: A File Library with Search, Filters and Multi-File Downloads, 1:36
- ![HubSpot Help Center: Search, Articles and Support on One Page](https://i.ytimg.com/vi/ihENdtvacDU/hqdefault.jpg)1:26
  
  ModulesSep 9, 2026
  
  ### HubSpot Help Center: Search, Articles and Support on One Page, 1:26
- ![How to Change Your HubSpot Theme Without Breaking Your Site](https://i.ytimg.com/vi/-ysb4RzRqmQ/hqdefault.jpg)4:07
  
  TutorialsAug 27, 2026
  
  ### How to Change Your HubSpot Theme Without Breaking Your Site, 4:07

    1. 0:00Why switching breaks sites
    2. 1:05Clone the pages
    3. 2:30Swap templates one at a time
    4. 3:40Check and publish
- ![Studio Nope Official for HubSpot: One Theme, Any Business](https://i.ytimg.com/vi/WH9T0DXrA0A/hqdefault.jpg)1:36
  
  ThemesAug 12, 2026
  
  ### Studio Nope Official for HubSpot: One Theme, Any Business, 1:36
- ![Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu](https://i.ytimg.com/vi/mRWu3-YkeNA/hqdefault.jpg)1:39
  
  ModulesAug 5, 2026
  
  ### Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu, 1:39
- ![HubSpot Custom Module in 2 Minutes: Built with the HubSpot CLI 2026](https://i.ytimg.com/vi/CSXVoGoPBc8/hqdefault.jpg)2:26
  
  TutorialsJul 22, 2026
  
  ### HubSpot Custom Module in 2 Minutes: Built with the HubSpot CLI 2026, 2:26
- ![A team planning a website around a table](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-team-workshop.jpg?width=1920&height=1282&name=video-pro-team-workshop.jpg)New
  
  TutorialsOct 30, 2026
  
  ### Live: build a video library page in HubSpot
  
  [Register](https://www.nopethemes.com/video-pro?hsLang=en#library)[Join now](https://www.nopethemes.com/video-pro?hsLang=en#library) Add to calendar
  
  GoogleOutlook.comApple or Outlook (.ics)

**No videos match** Try another word or clear the search.

Clear filters

Show more videos

6 of 10

Fill in the form to watch

One form opens every video in this library.

escto close

Share

Copy link

LinkedInEmail

Chapters

TranscriptFollows the video

Files

Demo 7 · Library

## The same library as a slider

Three videos at a time on a computer, two on a tablet and one and a bit on a phone, with arrows, dots and swiping. Hover the Harrington & Co card to see a silent preview. The upright short sits in the row with the others and opens upright in the lightbox.

- **Job**Library
- **Display**Slider
- **Source**YouTube and MP4
- **Opens**Lightbox

Watch next

## Start with a theme tour

- ![Studio Nope Official for HubSpot: One Theme, Any Business](https://i.ytimg.com/vi/WH9T0DXrA0A/hqdefault.jpg)1:36
  
  Themes
  
  ### Studio Nope Official for HubSpot: One Theme, Any Business, 1:36
- ![Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators](https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg)1:56New
  
  Themes
  
  ### Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators, 1:56
- ![A phone with a newsletter sign-up rising from the bottom of the screen](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-short-poster-sheet.jpg?width=540&height=960&name=video-pro-short-poster-sheet.jpg)0:30
  
  Modules
  
  ### Popup & Modal Pro in 30 seconds, 0:30
- ![Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar](https://i.ytimg.com/vi/vMfHsZSDffk/hqdefault.jpg)1:47New
  
  Themes
  
  ### Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar, 1:47
- ![Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery](https://i.ytimg.com/vi/N34-OASZBnI/hqdefault.jpg)2:01
  
  Themes
  
  ### Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery, 2:01
- ![Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu](https://i.ytimg.com/vi/mRWu3-YkeNA/hqdefault.jpg)1:39
  
  Modules
  
  ### Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu, 1:39

**No videos match** Try another word or clear the search.

Clear filters

escto close

Chapters

TranscriptFollows the video

Files

Demo 8 · Library

## A course as a playlist

One player with the lessons listed beside it. When a lesson ends, the next one starts. The first lesson is a self-hosted MP4 with captions and a transcript, and the rest are on YouTube. On a phone the list becomes a dropdown above the player.

- **Job**Library
- **Display**Playlist
- **Source**MP4 file and YouTube
- **Opens**In place

Course

## Build on HubSpot in four short lessons

![A bright open-plan office seen from above](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-hero-poster.jpg?width=1920&height=1080&name=video-pro-hero-poster.jpg)

1:16

A popup module, start to finish

Lesson 1 · 1:16

Choose a video1. A popup module, start to finish (1:16)2. Build a custom module with the HubSpot CLI (2:26)3. Change your theme without breaking the site (4:07)4. Put search, articles and support on one page (1:26)

1. 1 ![A bright open-plan office seen from above](https://www.nopethemes.com/hs-fs/hubfs/video-pro/video-pro-hero-poster.jpg?width=1920&height=1080&name=video-pro-hero-poster.jpg) A popup module, start to finish1:16
   
     1. 0:00The office
     2. 0:04The team
     3. 0:07The floor
   
   0:00
   
   A bright open-plan office, seen from above.
   
   0:04
   
   People work at long shared desks below.
   
   0:07
   
   The view drifts slowly across the floor.
2. 2 ![Build a custom module with the HubSpot CLI](https://i.ytimg.com/vi/CSXVoGoPBc8/hqdefault.jpg) Build a custom module with the HubSpot CLI2:26
3. 3 ![Change your theme without breaking the site](https://i.ytimg.com/vi/-ysb4RzRqmQ/hqdefault.jpg) Change your theme without breaking the site4:07
4. 4 ![Put search, articles and support on one page](https://i.ytimg.com/vi/ihENdtvacDU/hqdefault.jpg) Put search, articles and support on one page1:26

escto close

Chapters

TranscriptFollows the video

Files

Documentation

A video module for HubSpot CMS. Each instance does one of three jobs: a **Section** (one video with a cover, a play button and text beside it), a **Hero** (a silent looping video behind a headline), or a **Library** (a grid, slider or playlist of videos with category tabs, search and a lightbox). Every job plays YouTube, Vimeo, Wistia, Vidyard and Loom links, HubSpot videos, uploaded MP4 or WebM files and any `.mp4` address, and every video it plays can be described to Google with its title, cover, length, chapters and transcript.

Everything runs in the visitor's browser. There is no HubDB table, no workflow and no outside service. Nothing from a video host loads until a visitor presses play, unless you choose otherwise.

In the page editor's module list it is called **Video Pro**.

**Contents**

- [Install](https://www.nopethemes.com/video-pro#install)
- [From nothing to a working video](https://www.nopethemes.com/video-pro#from-nothing-to-a-working-video)
- [How it works](https://www.nopethemes.com/video-pro#how-it-works)
- [Getting the video link](https://www.nopethemes.com/video-pro#getting-the-video-link)
- [Covers, captions, transcript and chapters](https://www.nopethemes.com/video-pro#covers-captions-transcript-and-chapters)
- [What Google gets](https://www.nopethemes.com/video-pro#what-google-gets)
- [Field reference — Content tab](https://www.nopethemes.com/video-pro#field-reference--content-tab)
- [Field reference — Style tab](https://www.nopethemes.com/video-pro#field-reference--style-tab)
- [Recipes](https://www.nopethemes.com/video-pro#recipes)
- [Tracking](https://www.nopethemes.com/video-pro#tracking)
- [Accessibility](https://www.nopethemes.com/video-pro#accessibility)
- [Troubleshooting](https://www.nopethemes.com/video-pro#troubleshooting)
- [FAQ](https://www.nopethemes.com/video-pro#faq)
- [What it does not do](https://www.nopethemes.com/video-pro#what-it-does-not-do)

## Install

1. Buy the module. It appears in your portal under **Marketing → Files and Templates → Design Tools**.
2. Open the page you want it on in the page editor.
3. Drag **Video Pro** into a drag-and-drop area. A hero belongs in a full-width section at the top of the page; a section or a library goes wherever the content sits.
4. Open **Setup** first and pick **What this block does**. Every other group follows that choice.

The module is offered on site pages, landing pages, blog posts and blog listings.

**Dropped in and published with no edits**, it shows a Section: a cover image of a product tour, a pill-shaped play button reading *Watch the tour* with the running time, and beside it the eyebrow *Product tour*, the heading *See the whole workflow in two minutes*, two lines of text and a black *Watch the tour* button. Pressing play plays the bundled MP4 in place, with English captions, three chapters and a folded transcript under it. The page source carries a complete VideoObject for Google. Nothing on it needs a value to look finished. Replace the video, the cover and the words, and it is yours.

It draws its own styling and does not read a host theme's CSS variables. Three fields reach into the theme through HubSpot's field inheritance: **Style → Typography → Heading font** and **Text font** take the theme's heading and body fonts, and **Style → Colours → Accent** takes the theme's primary colour. On a theme that publishes those settings, the block lands in your palette before you touch anything. On a theme that does not, it is neutral grey and white with a blue accent.

## From nothing to a working video

1. **Job.** **Setup → What this block does**: *Section*, *Hero* or *Library*. Pick it first; the rest of the editor changes with it.
2. **Anchor.** **Setup → Anchor**: a short name such as `product-tour`. It becomes the block's `#anchor`, and share links and stored progress are kept under it. Give every Video Pro block on the site its own.
3. **The video.** For a Section or a Hero, open **Video → Video from** and pick the source, then paste the link or pick the file. For a Library, open **Videos** and fill one row per video. See [Getting the video link](https://www.nopethemes.com/video-pro#getting-the-video-link).
4. **Cover image.** **Video → Cover image** (or each row's **Cover image**). YouTube supplies its own when this is empty. Every other source needs one.
5. **What Google reads.** **Video title**, **Description**, **Upload date** and **Length**. Without a title and a cover, the video is not described to Google, and the editor says so.
6. **Text and buttons.** **Text** for the eyebrow, heading and copy, **Buttons** for up to three buttons, **Form** for a HubSpot form beside or under the text.
7. **How it plays.** Section: **Section → How it plays**. Library: **Library → Layout** and **Videos open**. Hero: **Hero → On phones**.
8. **Loading.** **Playback → Loading**. Leave it on *Cover first* unless the page exists for this one video. See [Fast or found](https://www.nopethemes.com/video-pro#fast-or-found-the-loading-choice).
9. **Style.** Set **Style → Colours → Accent** first, then the group named after your job (**Section layout**, **Hero** or **Cards**), then work down.

**Buttons** takes up to three rows and opens with one. **Videos** takes up to 60 rows and opens with six. **Chapters** takes up to 20 rows per video, **Captions** up to three, **Files** up to three.

## How it works

Read this once and the rest of the module stops being surprising.

### Three jobs, one block each

| Job | What it is | What the visitor does |
| --- | --- | --- |
| **Section** | One video in a frame with its cover and a play button, and optional text, buttons and a form beside it, above it or below it. | Presses play. The video plays in place, opens in the lightbox, or runs as a silent loop. |
| **Hero** | A muted looping video filling the block, with an overlay and your heading, text, buttons and form on top. | Reads. A pause button sits in a corner. An optional **Full video** button opens a second video, with sound, in the lightbox. |
| **Library** | Cards for many videos, as a grid, a slider, or a player with a list beside it. Category tabs, a topic filter, search and sort on top. | Filters, searches and opens a video in the lightbox with chapters, transcript, files, previous and next. |

One block does one job. For a hero and a library on the same page, drop the module twice.

### The lightbox

The lightbox is the module's popup. A Section set to *In a lightbox*, a Hero's **Full video** button, and every Library card (unless **Videos open** is *In the card*) open it.

It is a native HTML `<dialog>` opened with `showModal()`. It sits in the browser's top layer, above every z-index on the page, so a sticky header or an `overflow: hidden` wrapper cannot cover or clip it. The page behind is dimmed, blurred and locked.

Inside it, top to bottom:

1. The player, in the video's own shape, never taller than the screen. A 9:16 video sits centred at its natural width.
2. **Title and details** (**Lightbox → Title and details**): the title, length, date and description.
3. **Previous** and **Next** with a counter such as *3 of 12* (Library only, **Lightbox → Previous and next**). They follow the list as it is filtered, searched and sorted at that moment. The left and right arrow keys do the same.
4. A panel with tabs for **Chapters**, **Transcript** and **Files**, each only when the video has something in it (**Lightbox → Chapters, transcript and files**).
5. **Share** links (**Lightbox → Share links**).

Esc and the close button always close it. A click on the dimmed page closes it while **Close on a click outside** is on. Closing removes the player, so the sound stops and nothing keeps loading. Focus goes back to the card or button that opened it.

Only one lightbox is open on a page at a time, and only one video plays sound at a time: starting one pauses any other Video Pro video on the page.

### Cover first

Until a visitor presses play, a host video (YouTube, Vimeo, Wistia, Vidyard, Loom) is an `<img>` with your cover and a `<button>`. No player, no script and no cookie from the host reaches the page. The press builds the player and starts it. This is what keeps a page with ten videos as fast as a page with none.

An uploaded file is a `<video preload="none">` element in the page from the start. The browser downloads nothing until play.

A HubSpot video is held in a `<template>` and added to the page on play.

With **Playback → Loading** set to *Player in the page*, a Section that plays in place shows the host's own player instead. See [Fast or found](https://www.nopethemes.com/video-pro#fast-or-found-the-loading-choice).

### The space is reserved

Each video's **Shape** sets the frame's proportions before anything loads, so the page never jumps when the cover or the player arrives. Pick the shape the video was filmed in. A `youtube.com/shorts` link left at 16:9 is switched to 9:16.

### Section: how it plays

**Section → How it plays**:

- **In place.** The cover and play button sit in the frame. A press swaps in the player at the same size.
- **In a lightbox.** A press opens the lightbox.
- **Silent loop, like a GIF.** The video plays muted, looping and without controls, from the moment it scrolls into view, with a small pause button. **Sound button on the loop** adds a button to turn the sound on. This works with uploaded files and `.mp4` links only. Any other source plays in place, and the editor says so.

**Section → Text position** puts the text right, left, above or below the video. Below **Style → Section layout → Stack below** (900px), the two stack: the video comes after the text, except with *Below the video*, where it stays below. **Section → Show the text** off leaves the video on its own.

**End screen** (**Section → End screen**, In place only): when the video ends, the frame shows your heading, a button to a link or the form from the **Form** group, and *Replay*.

### Hero: the background video

The hero's video is decoration. It is always muted, it loops, it has no controls, and it is never described to Google. The cover image is the first thing on screen and stays under the video, so the hero looks finished before a single frame plays.

It plays when all of these hold, and otherwise the visitor sees the cover:

- The page has finished loading. The video never competes with the page for bandwidth.
- The visitor's device does not ask for reduced motion.
- The screen is wider than **Style → Spacing → Phone layout below** (768px), or **Hero → On phones** is *Play the phone file* (with a **Phone video file** set) or *Play the same video*.
- **Hero → Respect data saver** is off, or the visitor has not turned data saver on.
- The browser agrees. iPhones in Low Power Mode refuse to start any video by itself. The cover stays and the pause button changes to *Play*.

It pauses when the hero scrolls out of view or the tab goes to the background, and resumes on return. A visitor who presses the pause button keeps it paused for the rest of their visit.

**Sources for the background:** an uploaded MP4 or WebM, an `.mp4` link, or a YouTube or Vimeo link. A file is the right choice: keep it under 6 MB, 10 to 20 seconds, with no sound track. A YouTube or Vimeo background loads the host's player on every visit and is slower to start. A HubSpot video, a Wistia, Vidyard or Loom link, or embed code shows the cover only as a background.

**Full video.** **Hero → Full video button** adds a play button after your buttons. It opens the video set under **Hero → Full video** in the lightbox, with sound. That second video is the one described to Google. A button in **Buttons** set to *Play this block's video* does the same.

### Library: grid, slider, playlist

**Library → Layout**:

- **Grid.** Columns from **Style → Cards** (3, 2 on tablets, 1 on phones). A video marked **Featured** sorts first and, with **Wide featured cards** on, takes a card twice the width. **Videos before Show more** shows that many and a *Show more videos* button for the next batch. The number is rounded up so the last row is full. Filters and search look through every video, shown or not.
- **Slider.** A row of cards that scrolls sideways, by touch, drag, arrows or dots. The fraction in **Style → Slider → Cards in view on phones** (1.15) lets the next card peek in. **Autoplay** moves it on every few seconds, pauses on hover and focus, and has a pause button.
- **Playlist.** A player with the list beside it. A row press loads that video in the player. **Play the next video when one ends** moves down the list. Below **Style → Playlist → Stack below**, the list becomes a dropdown or rows under the player (**List on phones**).

A row in **Videos** can also be an **Image**, with an optional link. It sits in the grid as a card and opens in the lightbox as a picture.

**Cards** show the cover, a length badge, the category, the title and, when switched on in **Library**, the description, date and person. A card a visitor started and left shows a progress bar and *Resume at 0:38*, and the video picks up there. A video with an **Upload date** inside the last **New badge for** days (30) carries a *New* badge.

### Filters, search, sort

| Control | Field | What it does |
| --- | --- | --- |
| Category tabs | **Library → Category filter**, **Filter look** | One tab per distinct **Category** in the rows, in the order they first appear, after *All*. As segmented tabs, pills or a dropdown. **Counts in the filter** adds the number of videos to each. |
| Topic filter | **Library → Topic filter** | A dropdown built from every row's **Tags** (comma-separated). |
| Search | **Library → Search** | Matches the title, description, category, tags, person name and transcript, as the visitor types. Accents and case are ignored. The number of results is read out to screen readers. Pressing `/` on the page jumps to the search box. |
| Sort | **Library → Sort menu**, **Order** | Newest, oldest, title A–Z, shortest, or the order of the rows. **Order** is the starting order whether or not the menu shows. |
| No match | — | *No videos match*, a hint and a *Clear filters* button. |

The controls combine: a category, a topic and a search term narrow the list together.

With **Keep filters in the address** on, the choices are written into the page address under the block's anchor, for example `?webinars-cat=Tutorials&webinars-q=pricing`. Someone who opens that link sees the same filtered list.

Categories are typed per row, so `Webinars` and `webinars` make two tabs. Type them the same way every time.

### Share links and `?t=`

Every library video has its own link: the page address plus `?video=<anchor>.<link name>`. Opening it opens that video in the lightbox. Add `&t=90` to start it at 1:30. **Copy link** in the lightbox writes this link for you. The link name is the row's **Link name**, or its title in lower case with dashes.

A Section honours `?t=90` on its own: the page scrolls to the video, and the next press of play starts at 1:30. This is what makes the chapter links Google receives open at the right moment.

When the browser blocks playback with sound on a page that has just opened, the lightbox shows the player with its own play button, and one press starts it.

### Gated videos

Switch **Needs the form** on for a row, and pick **Library → Form for gated videos**. The card shows a lock. A press opens the form in the lightbox instead of the player. Once the visitor submits it, every gated video in that library opens, and stays open in that browser for **Remember the form for** days (180). Libraries with the same **Gate name** unlock together, on any page.

The gate is for collecting leads. The video's address is in the page source, and Google still sees the video, which is the point: a visitor finds it in search, arrives, and fills in the form.

### Live sessions

Give a row a **Live session starts** time (and **Live session ends**, **Register link**, **Join link**). The card changes by the visitor's own clock:

| Before the start | During | After the end, no video yet | After the end, video set |
| --- | --- | --- | --- |
| *Upcoming*, the date and time in the visitor's time zone, *Register*, *Add to calendar* | *Live now*, *Join now* | *Replay soon* | An ordinary video card |

*Add to calendar* offers Google Calendar, Outlook.com, and an `.ics` file for Apple Calendar and desktop Outlook. Build the page once; it moves through the states by itself.

### In the page editor

The editor shows the block as visitors see it, minus anything that moves by itself. Nothing autoplays, the hero shows its cover with the note *The background video plays on the live page*, the lightbox does not open from a share link, gated videos play, and the address bar is left alone. Pressing play still plays the video, in place, so you can check it.

With **Editor → Show setup hints in the editor** on, a note above the block lists what needs attention. Visitors never see it:

- no video picked, or a link the module does not recognise (the link is quoted);
- a video with no cover image;
- a video that is not sent to Google because it has no title or cover;
- a silent loop set on a source that cannot loop;
- a chapter time that cannot be read;
- a live session that ends before it starts;
- the same video link twice in one library.

### Several blocks on one page

Each block is independent: its own lightbox, its own filters, its own structured data. They share two things: one lightbox open at a time and one video playing sound at a time. Give each its own **Anchor**.

The same video in two blocks on one page is described to Google twice. Switch **SEO → Describe videos to Google** off on one of them.

### Opening a video from your own script

The module defines `window.videoPro` once per page:

```
videoPro.open('webinars', 'pricing-walkthrough'); // opens that video of the block anchored "webinars"
videoPro.open('product-tour');                     // opens the first video of that block
videoPro.close();                                  // closes the open lightbox
```

## Getting the video link

**Video → Video from** (and each row's **Video from**) picks the kind of source. For anything on a video host, choose **Link** and paste the address from the browser's address bar or the host's Share button. The module recognises the host from the address.

| Source | Pick | What to paste | Cover image |
| --- | --- | --- | --- |
| **YouTube** | Link | The watch page (`youtube.com/watch?v=…`), a share link (`youtu.be/…`), a Short (`youtube.com/shorts/…`), a live link (`youtube.com/live/…`) or an embed address (`youtube.com/embed/…`). | Optional. YouTube's own cover is used when empty. |
| **Vimeo** | Link | `vimeo.com/123456789`, or `player.vimeo.com/video/123456789`. For an unlisted video, the whole link including the code after the last slash: `vimeo.com/123456789/abcdef1234`. | Required. |
| **Wistia** | Link | The media page (`yourname.wistia.com/medias/…`) or `fast.wistia.net/embed/iframe/…`. | Required. |
| **Vidyard** | Link | `share.vidyard.com/watch/…` or `play.vidyard.com/…`. | Required. |
| **Loom** | Link | `loom.com/share/…` or `loom.com/embed/…`. | Required. |
| **An MP4 on any server** | Link | An address that ends in `.mp4`, `.webm` or `.m4v`. | Required. |
| **HubSpot Video** | HubSpot video | Pick the video from your HubSpot library in the field. | Required. HubSpot does not share its video cover with modules. |
| **Uploaded file** | Uploaded video file (MP4 or WebM) | Pick an MP4 (H.264) from **Files** in **Video file (MP4)**. A WebM in **Video file (WebM, optional)** is served first to browsers that play it. | Required. |
| **Anything else** | Embed code | The host's embed code. It is inserted when the visitor presses play, and any script inside it runs then. | Required. |

**Where the link is on each host:**

- **YouTube:** open the video, press **Share**, copy the `youtu.be` link. Or copy the address bar. The video must allow embedding (YouTube Studio → the video → **Details** → **Show more** → **License** → **Allow embedding**).
- **Vimeo:** press **Share** on the video and copy the link. For an unlisted video, the link Vimeo gives you already ends in the code; keep it. The video's privacy settings must allow embedding on your domain (Vimeo → the video → **Settings** → **Privacy** → **Where can this be embedded?**).
- **Wistia, Vidyard, Loom:** copy the share link from the video's page.
- **An uploaded file:** in HubSpot, **Marketing → Files**, upload the MP4, then pick it in the field. An MP4 uploaded to Files is served from HubSpot's file domain and plays like any other file.

**Embed code is the last resort.** The module cannot read an address out of it, so a video added as embed code is never described to Google, has no chapters, and reports only *start* and *close* to your analytics. Use it for a host the list above does not cover.

## Covers, captions, transcript and chapters

### Cover image

**Cover image** is what visitors see before they press play, what Google shows as the video's thumbnail, and on a Hero, the first thing on screen.

- Pick an image in the video's shape, at least 1600px wide for a Section or Hero and 1080px for a library card. The module serves smaller copies to smaller screens by itself.
- Set its alt text in the image field. Left empty, the video title is used.
- **Style → Video frame → Cover focus** (Top, Centre, Bottom) keeps faces in frame when the cover is cropped.
- A Hero can have a second, portrait cover for phones: **Hero → Phone cover (optional)**.

**Privacy:** with no cover image, a YouTube video's cover is loaded from YouTube's image server on page view. That is an image request with no script and no cookie. For a page that should make no request to Google at all before consent, upload your own cover and leave **Playback → Privacy mode** on.

### Phones and slow connections (Hero)

| Field | What it does |
| --- | --- |
| **Hero → On phones** | *Show the cover only* (default): phones get the still image. *Play the phone file*: phones play **Phone video file**, a smaller portrait MP4. *Play the same video*: phones play the desktop video. |
| **Hero → Phone cover (optional)** | A portrait cover for phones. Empty uses the main cover. |
| **Hero → Respect data saver** | Visitors who turned on data saver get the cover only. |

"Phone" is any screen narrower than **Style → Spacing → Phone layout below** (768px).

### Captions (.vtt)

Captions work for uploaded files and `.mp4` links. YouTube, Vimeo, Wistia and the other hosts show the captions you add on their own site, in their own player.

1. Make a WebVTT (`.vtt`) file. Most transcription tools export one, and YouTube Studio exports the captions of your own video as `.vtt`.
2. Upload it to **Marketing → Files** in HubSpot. A caption file on another domain only loads if that server allows it, and fails without a message when it does not.
3. In the video's **Captions**, add a row: **Caption file (.vtt)**, **Language code** (`en`, `de`, `fr`), **Name in the player** (*English*), and **On by default** for the one that should show without the visitor asking.

Up to three languages per video. The visitor switches them in the player's captions menu.

### Transcript

**Transcript** is printed in the page's HTML, so search engines read it and visitors who cannot or would rather not listen can read it.

- **SEO → Transcript on the page**: *Folded* (default) shows a *Transcript* toggle under the video; *Open* shows it in full; *Not shown* leaves it out of the page and out of what Google is told. The module never describes text to Google that visitors cannot see.
- **Start a paragraph with a time** and it becomes a line visitors can press to jump there: `1:05 Here is how the triggers work.` Both `m:ss` and `h:mm:ss` work. One time per paragraph.
- While the video plays, the line being spoken is highlighted and the transcript follows it.
- In the lightbox, the transcript sits in its own tab.

### Chapters and key moments

**Chapters** splits a video into named parts. Each row is a **Starts at** time (`m:ss` or `h:mm:ss`) and a **Chapter title**. Start the first at `0:00`.

- In the lightbox, chapters are a list of buttons. A press jumps the video there.
- Google receives each chapter as a key moment (see [Key moments](https://www.nopethemes.com/video-pro#key-moments)).
- A time the module cannot read is skipped, and the editor names it.

For a YouTube video, Google also reads chapter times from the description on YouTube itself. That helps the YouTube page; the chapters here describe your page.

## What Google gets

With **SEO → Describe videos to Google** on (the default), each block prints VideoObject structured data in the page's HTML, the format Google's video documentation asks for. It is printed by HubSpot on the server, so it is there on the first load and for every crawler.

**What this does and does not do.** Structured data tells Google what a video is, how long it is, where it plays and where its chapters start. It makes the video eligible for video features in search. It does not make Google show any of them. Whether a video appears in video results, with a thumbnail or with key moments, is Google's decision, made page by page, and it can take weeks after the page is crawled. The module gives Google complete, valid information. No module can promise a rich result, and this one does not.

### What is described

| Job | Described | Not described |
| --- | --- | --- |
| Section | The video. | — |
| Hero | The **Full video**, when **Full video button** is on. | The background loop. A silent loop is decoration, and describing it as the page's video would mislead. |
| Library | Every video row, or only featured rows with **SEO → Which library videos** = *Featured only*. With **List the library as an ItemList** on, they are wrapped in one ItemList. | Image rows. |
| Any job | — | Embed code. A video with no **Video title**, or no cover (YouTube excepted). |

### Property by property

| Google receives | From |
| --- | --- |
| Name | **Video title** (or the row's **Title**). Every video on the page needs its own. |
| Thumbnail | **Cover image**, or YouTube's cover. |
| Upload date | **Upload date**. Empty uses the page's publish date. |
| Description | **Description**. Empty repeats the title. |
| Length | **Length: minutes** and **Length: seconds**. Both 0 leaves it out. |
| The video file | Uploaded files and `.mp4` links: the file's address. |
| The player | YouTube, Vimeo, Wistia, Vidyard and Loom: the host's player address. |
| Key moments | **Chapters**, or **SEO → Key moments**. |
| Transcript | **Transcript**, unless **Transcript on the page** is *Not shown*. |
| Captions and language | **Captions** on uploaded files and `.mp4` links. |
| Views | **View count (optional)**. Only a number you can stand behind. |
| Expiry | **Stops being available (optional)**. |
| Countries | **SEO → Only in these countries**. Empty means everywhere. |
| Maker | **SEO → Made by**, **Maker name**, **Maker website**. Empty leaves it out. |
| Live badge | A row's live session times, with **SEO → Live badge for sessions** on. |
| Event | Upcoming sessions, with **SEO → Event data for upcoming sessions** on, until the session ends. |

A HubSpot video is described with its name, cover, date, length and transcript, without a player or file address, because HubSpot does not share them with modules. That is valid structured data and the weakest of the sources for search. For a video that must be found, host it on YouTube or Vimeo, or upload the file.

### Key moments

**SEO → Key moments**:

- **From chapters** (default). Each chapter becomes a clip with its name, start, end and a link to the page with `?t=` and the second it starts. The page honours that link and plays from there. An uploaded file or `.mp4` link with no chapters falls back to *Let Google pick them*.
- **Let Google pick them.** Google chooses the moments itself and links to them through the same `?t=` address.
- **Off.**

### Fast or found: the loading choice

**Playback → Loading** decides what is in the page before a visitor presses play.

|  | Cover first (default) | Player in the page |
| --- | --- | --- |
| Before a press | Your cover and a play button. No host script, no host cookie. | The host's own player, loaded lazily as it scrolls near. |
| Page speed | Unaffected by the video. | Each host player adds the host's scripts and requests to the page. |
| How Google finds the video | From the structured data and the link in the page. | From the structured data, the link, and the player itself. |
| Look | The module's play button and cover. | The host's player and its own cover; the module's play button is gone. |

Google's video guidance says a video should not depend on a click to load, and that Google finds videos through `<video>`, `<iframe>` and `<embed>` elements. *Cover first* holds the player back until the click, so for host videos Google relies on the structured data. *Player in the page* puts the player where Google looks for it, at the cost of speed.

**Which to choose:**

- A page that exists to show one video (a webinar recording, a product tour page): *Player in the page*, on a Section set to play **In place**.
- Everywhere else, and any page with several videos: *Cover first*.

*Player in the page* applies to a Section that plays **In place** with a YouTube, Vimeo, Wistia, Vidyard or Loom link. A Hero, a Library and a Section set to lightbox or loop always load cover first. Uploaded files and `.mp4` links need no choice: their `<video>` element is in the page from the start and downloads nothing until play, which is both fast and visible to Google.

### Libraries and video results

Google's video results favour a watch page: a page whose main purpose is one video. A library page lists many, so its videos are described fully and correctly, and Google decides how much of that to use. Google's carousel format for lists does not cover videos. For the video that must rank, give it its own page with a Section block, and link to that page from the library.

### Checking it

Paste the published page's address into Google's Rich Results Test (https://search.google.com/test/rich-results). It lists each video it found and any field it misses. Structured data is not printed in the page editor or its preview; test the live page.

### Gated videos and search

A gated video is still described to Google, and its address is in the page. A form you choose to put in front of a free video is not a paywall, and Google treats it as an ordinary video.

## Field reference — Content tab

Groups are listed in the order the editor shows them. A field noted *shown when* only appears in the editor under that condition.

### Setup

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| What this block does | Choice | `Section` | Section: a video with a cover and text beside it · Hero: a looping background video behind a headline · Library: a grid, slider or playlist of videos | Every other setting follows this choice. |
| Anchor | Text | empty |  | The block's `#anchor`, and the first part of share links (`?video=anchor.video`). Lower-case letters, numbers and dashes. Empty uses the module's own id, which is not something you want in a link, so fill it in. |
| First block on the page | Toggle | Off |  | Shown for a Section. Loads the cover first, which helps the page's speed score. Turn it on when this Section is the first thing on the page. A Hero always does this. |

### Video

Shown for a Section and a Hero. In a Hero, this is the background video.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Video from | Choice | `Uploaded video file (MP4 or WebM)` | Link: YouTube, Vimeo, Wistia, Vidyard, Loom or an .mp4 address · HubSpot video · Uploaded video file (MP4 or WebM) · Embed code | See [Getting the video link](https://www.nopethemes.com/video-pro#getting-the-video-link). |
| Video link | URL | empty |  | Shown for Link. |
| HubSpot video | Video | empty |  | Shown for HubSpot video. Upload a cover image too. |
| Video file (MP4) | File | the bundled product tour |  | Shown for an uploaded file. MP4 (H.264). Nothing downloads until play. |
| Video file (WebM, optional) | File | empty |  | Shown for an uploaded file. Served first to browsers that play WebM. |
| Embed code | Text | empty |  | Shown for Embed code. Inserted on play. Never described to Google. |
| Cover image | Image | the product tour cover |  | Shown until the video plays, and sent to Google. YouTube uses its own when empty; every other source needs one. |
| Video title | Text | `Popup & Modal Pro: product tour` |  | The name Google and screen readers get. |
| Description | Text | one sentence about the tour |  | One or two plain sentences for Google. |
| Upload date | Date | 28 September 2026 |  | The day the video was first published. Empty uses the page's publish date. |
| Length: minutes | Number | `1` | 0–600 |  |
| Length: seconds | Number | `16` | 0–59 | Shown on the play button and sent to Google. |
| Shape | Choice | `16:9 (widescreen)` | 16:9 (widescreen) · 21:9 (cinema) · 4:3 · 1:1 (square) · 4:5 (portrait) · 9:16 (phone, Shorts) | Reserves the space before the video loads. |
| Start at | Number, s | `0` | 0–36000 | Where play begins. |
| Chapters | Repeater, 0–20 | three chapters |  | **Starts at** (`m:ss` or `h:mm:ss`) and **Chapter title**. Shown in the lightbox and sent to Google as key moments. |
| Captions | Repeater, 0–3 | one English track |  | **Caption file (.vtt)**, **Language code**, **Name in the player**, **On by default**. Uploaded files and `.mp4` links only. |
| Transcript | Rich text | the tour's transcript |  | Printed on the page. A paragraph that starts with a time becomes a line visitors can jump to. |
| View count (optional) | Number | empty | 0–1,000,000,000 | Leave empty to leave it out. |
| Stops being available (optional) | Date | empty |  | Leave empty if the video stays up. |

### Text

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Eyebrow | Text | `Product tour` |  | A small line above the heading. Empty removes it. |
| Heading | Text | `See the whole workflow in two minutes` |  |  |
| Heading level | Choice | `H2` | H1 · H2 · H3 · H4 · Paragraph | One H1 per page. A hero at the top of the page usually takes H1. |
| Text | Rich text | two sentences |  |  |
| Show the heading above the library | Toggle | On |  | Shown for a Library. |
| Show captions and length under the text | Toggle | On |  | Shown for a Section. A line naming the caption languages and the length. |

### Buttons

Shown for a Section and a Hero. Repeater, 0–3 rows, one by default.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Button text | Text | `Watch the tour` |  |  |
| When clicked | Choice | `Play this block's video` | Play this block's video · Open a link · Scroll to an anchor on this page | In a Hero, *Play* opens the full video in the lightbox. |
| Link | Link | empty |  | Shown for *Open a link*. |
| Anchor | Text | empty |  | Shown for *Scroll to an anchor*. The id of a block on this page, without `#`. |
| Look | Choice | `Primary` | Primary · Secondary · Text link |  |
| Icon | Toggle | On |  |  |
| Icon | Icon | `play` |  | Shown when the toggle above is on. |
| Icon side | Choice | `Before the text` | Before the text · After the text | Shown when the icon is on. |

### Form

Shown for a Section and a Hero.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Form | Form | none chosen |  | Shown under the text, and on the end screen when picked there. Forms from HubSpot's new forms editor render in HubSpot's own frame and are styled in the form editor. |
| Form heading | Text | empty |  | A line above the form. |

### Section

Shown for a Section.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| How it plays | Choice | `In place` | In place · In a lightbox · Silent loop, like a GIF | Silent loop works with uploaded files and `.mp4` links only. |
| Play button text | Text | `Watch the tour` |  | In the pill-shaped play button, with the length. Empty shows the icon and length only. |
| Show the text | Toggle | On |  | Off leaves the video on its own. |
| Text position | Choice | `Left of the video` | Right of the video · Left of the video · Above the video · Below the video | Shown when the text is on. |
| Sound button on the loop | Toggle | Off |  | Shown for Silent loop. |
| End screen | Toggle | Off |  | When the video ends: a heading with a button or the form, and *Replay*. In place only. |
| End screen heading | Text | `Ready to try it?` |  | Shown when the end screen is on. |
| End screen button | Text | `Start free` |  | Shown when the end screen is on. |
| End screen link | Link | empty |  | Shown when the end screen is on. The button shows only with a link. |
| Show the form instead of the button | Toggle | Off |  | Shown when the end screen is on. Uses **Form → Form**. |

### Hero

Shown for a Hero.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Phone cover (optional) | Image | empty |  | A portrait cover for phones. Empty uses the video's cover. |
| On phones | Choice | `Show the cover only` | Show the cover only · Play the phone file · Play the same video |  |
| Phone video file | File | empty |  | Shown for *Play the phone file*. A smaller, portrait MP4. With none, phones get the cover. |
| Respect data saver | Toggle | On |  | Visitors who turned on data saver see the cover only. |
| Parallax | Toggle | Off |  | The background moves at a third of the scroll speed. Off for visitors who ask for reduced motion, and in the editor. |
| Full video button | Toggle | Off |  | Adds a button that opens a second video, with sound, in the lightbox. |
| Full video | Group |  |  | Shown when the toggle above is on. The same fields as **Video**, from **Video from** to **Stops being available**. Defaults to a YouTube link, no chapters and no captions. This is the video described to Google. |

### Videos

Shown for a Library. Repeater, 1–60 rows, six by default (YouTube videos in the categories *Themes*, *Modules* and *Tutorials*, the first one featured).

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Item | Choice | `Video` | Video · Image |  |
| Image | Image | empty |  | Shown for Image. |
| Image link (optional) | Link | empty |  | Shown for Image. With a link, the card goes there instead of opening the lightbox. |
| Video from … Stops being available |  |  |  | The same fields as **Video**, per row. **Upload date** empty uses the page's publish date. |
| Title | Text | `Video title` |  | The card title, the lightbox caption and the name Google gets. |
| Description | Text | empty |  |  |
| Link name | Text | empty |  | Used in share links. Empty uses the title. |
| Category | Text | `Videos` |  | Category tabs are built from these, in the order they first appear. |
| Tags | Text | empty |  | Comma-separated. They fill the topic filter. |
| Featured | Toggle | Off |  | Sorts first and, in the grid, takes a wide card. |
| Hover preview clip (optional) | File | empty |  | A short, silent MP4 that plays in the card on hover. |
| Person photo, Person name, Person role | Image, Text, Text | empty |  | Shown on the card with **Library → Person** on. For a speaker or a customer. |
| Quote | Text | empty |  | Shown in the lightbox. |
| Files | Repeater, 0–3 | none |  | **File text** (`Slides (PDF)`) and **File link**. In the lightbox's Files tab. |
| Needs the form | Toggle | Off |  | A lead-capture gate, see [Gated videos](https://www.nopethemes.com/video-pro#gated-videos). |
| Live session starts (optional) | Date and time | empty |  | See [Live sessions](https://www.nopethemes.com/video-pro#live-sessions). |
| Live session ends | Date and time | empty |  |  |
| Register link | Link | empty |  | Before the start. |
| Join link | Link | empty |  | During the session. |

### Library

Shown for a Library.

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Choice | `Grid` | Grid · Slider · Playlist: player with a list |  |
| Videos open | Choice | `In a lightbox` | In a lightbox · In the card | Shown for Grid and Slider. *In the card* plays the video inside its card. |
| Card text | Choice | `Under the cover` | Under the cover · On the cover · On the cover, on hover | Shown for Grid and Slider. *On the cover, on hover* always shows the text on touch screens. |
| Description | Toggle | Off |  | On the card. |
| Length | Toggle | On |  | The length badge. |
| Category | Toggle | On |  |  |
| Date | Toggle | Off |  |  |
| Person | Toggle | Off |  |  |
| Hover previews | Toggle | On |  | Plays a row's **Hover preview clip** on hover. Never on touch screens or for reduced motion. |
| Wide featured cards | Toggle | On |  | Shown for Grid. |
| New badge for | Number, days | `30` | 0–365 | 0 turns the badge off. |
| Videos before Show more | Number | `9` | 0–60 | Shown for Grid. 0 shows all. Rounded so the last row is full. |
| Category filter | Toggle | On |  |  |
| Filter look | Choice | `Segmented tabs` | Segmented tabs · Pills · Dropdown | Shown when the filter is on. |
| Counts in the filter | Toggle | On |  | Shown when the filter is on. |
| Topic filter | Toggle | Off |  |  |
| Search | Toggle | On |  |  |
| Sort menu | Toggle | Off |  |  |
| Order | Choice | `As listed` | As listed · Newest first · Oldest first · Title A–Z · Shortest first | The starting order. |
| Keep filters in the address | Toggle | On |  | A filtered link opens filtered. |
| Arrows | Toggle | On |  | Shown for Slider. |
| Dots | Toggle | On |  | Shown for Slider. |
| Autoplay | Toggle | Off |  | Shown for Slider. Pauses on hover and focus, and has a pause button. |
| Autoplay every | Number, s | `6` | 3–15 | Shown when autoplay is on. |
| Loop | Toggle | Off |  | Shown for Slider. After the last card, back to the first. |
| Play the next video when one ends | Toggle | On |  | Shown for Playlist. |
| List on phones | Choice | `Dropdown` | Dropdown · Rows under the player | Shown for Playlist. |
| Form for gated videos | Form | none chosen |  | Visitors fill it in once to watch every video marked **Needs the form**. |
| Remember the form for | Number, days | `180` | 1–365 |  |
| Gate name | Text | empty |  | Libraries with the same gate name unlock together. Empty uses the anchor. |
| Add to calendar on upcoming sessions | Toggle | On |  |  |

### Playback

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Play when the lightbox opens | Toggle | On |  | Starts with sound, because the visitor pressed something to open it. |
| Player controls (uploaded files) | Toggle | On |  | The browser's controls on uploaded files and `.mp4` links. Host players keep their own. |
| Loop | Toggle | Off |  | Starts again when it ends. |
| Privacy mode | Toggle | On |  | YouTube plays from youtube-nocookie.com, and Vimeo is asked not to track the viewer. |
| Loading | Choice | `Cover first: fastest, the player loads on click` | Cover first: fastest, the player loads on click · Player in the page: for a page built around this one video | See [Fast or found](https://www.nopethemes.com/video-pro#fast-or-found-the-loading-choice). |

### Lightbox

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Title and details | Toggle | On |  | Under the player. |
| Chapters, transcript and files | Toggle | On |  | The tabbed panel. |
| Previous and next | Toggle | On |  | Shown for a Library. |
| Close on a click outside | Toggle | On |  | Esc and the close button always close it. |
| Share links | Toggle | Off |  |  |
| Share to | Choice, several | Copy link · LinkedIn · Email | Copy link · LinkedIn · X · Facebook · Email | Shown when share links are on. Plain links; no network scripts load. |

### SEO

| Field | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Describe videos to Google | Toggle | On |  | Prints VideoObject structured data. If the same video appears twice on one page, turn this off on one block. |
| Which library videos | Choice | `All` | All · Featured only | Shown for a Library. |
| List the library as an ItemList | Toggle | On |  | Shown for a Library. |
| Key moments | Choice | `From chapters` | From chapters · Let Google pick them · Off | See [Key moments](https://www.nopethemes.com/video-pro#key-moments). |
| Live badge for sessions | Toggle | On |  |  |
| Event data for upcoming sessions | Toggle | On |  |  |
| Made by | Choice | `Organisation` | Organisation · Person |  |
| Maker name | Text | empty |  | Empty leaves the maker out. |
| Maker website | URL | empty |  |  |
| Only in these countries | Text | empty |  | Two-letter codes, comma-separated (`US, CA`). Empty means everywhere. |
| Transcript on the page | Choice | `Folded` | Folded · Open · Not shown | *Not shown* also leaves it out of the structured data. |

### Tracking

| Field | Type | Default | Notes |
| --- | --- | --- | --- |
| Send events to dataLayer (GA4, GTM) | Toggle | Off | See [Tracking](https://www.nopethemes.com/video-pro#tracking). |
| Event name prefix | Text | `video_pro` | Events are named `<prefix>_start`, `<prefix>_complete` and so on. |
| 25, 50 and 75 % events | Toggle | On |  |

### Advanced

| Field | Type | Default | Notes |
| --- | --- | --- | --- |
| Extra class | Text | empty | Added to the block, for your own theme rules. The module's own styling never uses it. |

### Words

Every word the module prints itself, for translating or rewording. Words in `{braces}` are filled in by the module; keep them.

| Field | Default | Where |
| --- | --- | --- |
| Play video | `Play video: {title}` | Spoken name of a play button. |
| Pause background, Play background | `Pause background video`, `Play background video` | Spoken name of the Hero's pause button. |
| Pause short, Play short | `Pause`, `Play` | The Hero's pause button text. |
| Watch full video | `Watch the full video` | The Hero's full-video button. |
| Close, To close | `Close`, `to close` | The lightbox close button and its Esc hint. |
| Previous, Next, Counter | `Previous video`, `Next video`, `{current} of {total}` | Lightbox. |
| Slider counter | `{from}–{to} of {total}` | Slider. |
| All, Filter label | `All`, `Filter videos` | Category tabs. |
| Tag label, All topics | `Topic`, `All topics` | Topic filter. |
| Search placeholder, Results count | `Search videos`, `{count} videos` | Search. |
| No results, No results hint, Clear filters | `No videos match`, `Try another word or clear the search.`, `Clear filters` | Empty search. |
| Sort label, Sort newest, Sort oldest, Sort title, Sort shortest, Sort manual | `Sort`, `Newest`, `Oldest`, `Title A–Z`, `Shortest`, `Featured` | Sort menu. |
| Show more, Shown count | `Show more videos`, `{shown} of {total}` | Grid. |
| Chapters, Transcript, Files | `Chapters`, `Transcript`, `Files` | Lightbox tabs and the transcript toggle. |
| Read along, Follows video | `Read along`, `Follows the video` | Transcript. |
| Captions in | `Captions in {language}` | The line under a Section's text. |
| Minutes short | `min` | Lengths. |
| New, Upcoming, Live now, Replay soon | `New`, `Upcoming`, `Live now`, `Replay soon` | Card badges. |
| Register, Join | `Register`, `Join now` | Session buttons. |
| Add to calendar, Calendar file | `Add to calendar`, `Apple or Outlook (.ics)` | Session calendar menu. |
| Share, Copy link, Copied | `Share`, `Copy link`, `Link copied` | Lightbox share. |
| Replay | `Replay` | End screen. |
| Sound on, Sound off | `Turn sound on`, `Turn sound off` | Silent loop sound button. |
| Gate heading, Gate text, Locked | `Fill in the form to watch`, `One form opens every video in this library.`, `Form required` | Gated videos. |
| Unavailable, Watch on host | `This video can’t be played here.`, `Watch on {host}` | A video the host refuses to play. |
| Noscript | `Watch “{title}”` | The link shown to visitors with JavaScript off. |
| Resume at | `Resume at {time}` | Cards. |
| Slides label, Slide label, Go to slide, Pause slider, Play slider | `Videos`, `{current} of {total}`, `Go to slide {n}`, `Pause the slider`, `Play the slider` | Slider, mostly spoken. |
| Playlist label, Now playing | `Choose a video`, `Now playing` | Playlist. |
| Editor … | the setup hints | Editor only. Visitors never see them. |

### Editor

| Field | Type | Default | Notes |
| --- | --- | --- | --- |
| Show setup hints in the editor | Toggle | On | Visitors never see them. |

## Field reference — Style tab

Every value on this tab is a field that becomes a CSS custom property on that one block. Two Video Pro blocks on one page can look entirely different.

**Colour fields carry an opacity.** Both halves reach the page. A swatch at 40% renders at 40%.

**Fonts fetch themselves.** When a font field names a Google family, the module requests it. Nothing needs adding to the theme.

**Empty means "follows".** Several colour fields ship empty. An empty field follows another value, and its Notes say which. Pick a colour to set it directly; clear it to follow again.

**Groups for other jobs stay in the list.** The Style tab shows every group whatever the job. A Section ignores **Hero**, **Cards**, **Slider** and **Playlist**.

### Colours

| Field | Type | Default | Notes |
| --- | --- | --- | --- |
| Accent | Colour | `#2563eb` | Inherits the theme's primary colour. Eyebrow, category text, focus ring, progress bar and the highlighted transcript line. |
| Headings and titles | Colour | `#0a0a0a` |  |
| Text | Colour | `#525252` |  |
| Details | Colour | `#737373` | Lengths, dates, captions line. |
| Placeholders and counts | Colour | `#a3a3a3` |  |
| Surfaces | Colour | `#ffffff` | Panels and inputs. |
| Quiet surfaces | Colour | `#fafafa` | Placeholder frames, the transcript. |
| Hover surfaces | Colour | `#f5f5f5` |  |
| Lines | Colour | `#e5e5e5` |  |
| Strong lines | Colour | `#d4d4d4` |  |
| Focus ring | Colour | empty | Empty uses the accent at 40%. |

### Typography

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Heading font | Font | Inter · sans-serif |  | Follows your theme until you pick a font. |
| Text font | Font | Inter · sans-serif |  | Follows your theme until you pick a font. |
| Heading size | Number, px | `36` | 16–96 | Section and Library. |
| Heading size on phones | Number, px | `26` | 14–64 |  |
| Hero heading size | Number, px | `56` | 20–120 |  |
| Hero heading size on phones | Number, px | `36` | 18–72 |  |
| Heading weight | Choice | `600` | 400 · 500 · 600 · 700 · 800 |  |
| Heading line height | Number | `1.12` | 0.9–2 |  |
| Heading letter spacing | Number, em | `-0.025` | -0.1–0.2 |  |
| Heading case | Choice | `As typed` | As typed · Upper case |  |
| Text size | Number, px | `16` | 12–28 |  |
| Hero text size | Number, px | `18` | 12–32 |  |
| Text line height | Number | `1.6` | 1–2.4 |  |
| Eyebrow size | Number, px | `12` | 10–20 |  |
| Eyebrow case | Choice | `As typed` | As typed · Upper case |  |
| Card title size | Number, px | `15` | 12–28 |  |
| Details size | Number, px | `13` | 10–18 |  |

### Spacing

| Field | Type | Default | Range | Notes |
| --- | --- | --- | --- | --- |
| Content width | Number, px | `1200` | 600–1920 |  |
| Side padding | Number, px | `16` | 0–80 |  |
| Top padding, Bottom padding | Number, px | `96`, `96` | 0–240 |  |
| Top padding on phones, Bottom padding on phones | Number, px | `56`, `56` | 0–160 |  |
| Background | Colour | empty |  | Empty keeps the page background. |
| Phone layout below | Number, px | `768` | 480–1024 | The phone breakpoint, also for the Hero's phone cover and phone video. |

### Video frame

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Corner radius | Number, px | `14` | 0–40 |  |
| Corner radius on phones | Number, px | `12` | 0–40 |  |
| Inner line | Colour | `#0a0a0a` at 8% |  | A hairline inside the frame, so a white cover still has an edge. |
| Shadow | Choice | `Soft` | None · Hairline · Soft · Deep |  |
| Cover tint | Colour | `#0a0a0a` at 10% |  | Over the cover, under the play button. |
| Background while loading | Colour | `#f5f5f5` |  |  |
| Cover focus | Choice | `Centre` | Top · Centre · Bottom |  |
| Zoom the cover on hover | Toggle | On |  |  |

### Play button

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Shape | Choice | `Pill with text and length` | Pill with text and length · Circle · Corner chip |  |
| Height | Number, px | `52` | 40–80 | The circle is 24px larger. |
| Height on phones | Number, px | `46` | 44–72 |  |
| Background | Colour | `#ffffff` at 92% |  |  |
| Text | Colour | `#0a0a0a` |  |  |
| Icon disc | Colour | `#0a0a0a` |  |  |
| Icon | Colour | `#ffffff` |  |  |
| Background on hover | Colour | `#ffffff` |  |  |
| Background blur | Number, px | `10` | 0–20 |  |
| Circle ring | Colour | `#ffffff` at 45% |  |  |
| Pulse | Toggle | Off |  | A soft ring that pulses round the play button. Stops for reduced motion. |

### Section layout

| Field | Type | Default | Range / options |
| --- | --- | --- | --- |
| Video width | Number, % | `58` | 40–75 |
| Gap | Number, px | `64` | 16–160 |
| Vertical alignment | Choice | `Centre` | Centre · Top |
| Stack below | Number, px | `900` | 480–1280 |
| Text width when above | Number, px | `720` | 320–1200 |
| Video width when above or below | Number, px | `960` | 320–1920 |
| Text column max width | Number, px | `520` | 280–900 |

### Hero

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Height | Number, svh | `80` | 0–100 | Share of the screen height. 100 fills the screen; 0 fits the content. |
| Height on tablets | Number, svh | `70` | 0–100 |  |
| Height on phones | Number, svh | `75` | 0–100 |  |
| Minimum height | Number, px | `560` | 240–1200 |  |
| Text position | Choice | `Middle left` | Top, Middle or Bottom × left, centre or right |  |
| Text position on phones | Choice | `Top left` | the same |  |
| Text width | Number, px | `600` | 280–1200 |  |
| Top and bottom padding | Number, px | `96` | 0–240 |  |
| Heading colour | Colour | empty |  | Empty is dark on a light veil and white on dark overlays. |
| Text colour | Colour | empty |  | Empty follows the overlay. |
| Overlay | Choice | `Light veil from the text side` | Light veil from the text side · Dark veil from the text side · Even colour · Gradient · None |  |
| Overlay colour | Colour | `#ffffff` |  | Shown for the light veil and Even colour. |
| Overlay strength | Number, % | `94` | 0–100 |  |
| Gradient colour 1, Gradient colour 2 | Colour | `#0a0a0a` at 70%, at 0% |  | Shown for Gradient. |
| Gradient angle | Number, ° | `90` | 0–360 | Shown for Gradient. |
| Video focus | Choice | `Centre` | Left · Centre · Right | Which part of the video stays in view when the hero is narrower than the video. |
| Pause button corner | Choice | `Bottom right` | Bottom right · Bottom left · Top right · Top left |  |
| Pause button height | Number, px | `32` | 24–56 |  |
| Tablet layout below | Number, px | `1024` | 600–1440 |  |

A Hero with no eyebrow, heading or text draws no overlay.

### Cards

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Columns | Number | `3` | 1–6 |  |
| Columns on tablets | Number | `2` | 1–4 |  |
| Columns on phones | Number | `1` | 1–2 |  |
| Tablet layout below | Number, px | `1024` | 600–1440 |  |
| Column gap, Row gap | Number, px | `24`, `32` | 0–80 |  |
| Card background | Colour | empty |  | Empty leaves cards open on the page. |
| Card border | Colour | empty |  | Empty draws no border. |
| Cover radius | Number, px | `10` | 0–40 |  |
| Card padding | Number, px | `0` | 0–40 |  |
| Cover shadow | Choice | `Hairline` | None · Hairline · Soft · Deep |  |
| Cover shape | Choice | `16:9` | 16:9 · 4:3 · 1:1 · 4:5 · 9:16 | Every card's cover is cropped to this, whatever each video's shape. |
| Hover | Choice | `Zoom the cover` | Zoom the cover · Lift the card · None |  |
| Length badge, Length badge text | Colour | `#ffffff` at 92%, `#0a0a0a` |  |  |
| New badge | Colour | empty |  | Empty uses the accent. |
| Live badge | Colour | `#dc2626` |  |  |
| Upcoming badge | Colour | `#525252` |  |  |
| Resume bar | Colour | empty |  | Empty uses the accent. |
| Resume bar and time | Toggle | On |  | Off: cards do not show progress, and videos start from the beginning. |

### Filters and search

| Field | Type | Default | Range / options |
| --- | --- | --- | --- |
| Alignment | Choice | `Left` | Left · Centre |
| Tab height | Number, px | `32` | 28–48 |
| Radius | Number, px | `10` | 0–24 |
| Tab track | Colour | `#f5f5f5` |  |
| Tab text | Colour | `#737373` |  |
| Active tab | Colour | `#ffffff` |  |
| Active tab text | Colour | `#0a0a0a` |  |
| Search width | Number, px | `260` | 160–480 |

### Slider

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Cards in view | Number | `3` | 1–6 | Fractions show part of the next card. |
| Cards in view on tablets | Number | `2` | 1–4 |  |
| Cards in view on phones | Number | `1.15` | 1–2 |  |
| Run to the screen edge | Toggle | On |  | The next card peeks in from the right edge of the screen. |
| Arrow size | Number, px | `36` | 28–56 |  |
| Arrow background, Arrow icon | Colour | `#ffffff`, `#0a0a0a` |  |  |
| Dot, Active dot | Colour | `#d4d4d4`, `#0a0a0a` |  |  |

### Playlist

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| List side | Choice | `Right` | Right · Left |  |
| List width | Number, % | `34` | 20–50 |  |
| List height | Number, px | `520` | 200–1200 | The list scrolls beyond this. |
| Playing row | Colour | empty |  | Empty uses a tint of the accent. |
| Playing row line | Colour | empty |  | Empty uses the accent. |
| Stack below | Number, px | `900` | 480–1280 |  |

### Lightbox

| Field | Type | Default | Range |
| --- | --- | --- | --- |
| Backdrop | Colour | `#0a0a0a` at 80% |  |
| Backdrop blur | Number, px | `8` | 0–24 |
| Width | Number, px | `820` | 480–1600 |
| Radius | Number, px | `18` | 0–40 |
| Frame | Number, px | `6` | 0–16 |
| Panel | Colour | `#ffffff` |  |
| Panel line | Colour | `#0a0a0a` at 8% |  |
| Button size | Number, px | `36` | 28–56 |

### Buttons

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Height | Number, px | `40` | 28–64 |  |
| Side padding | Number, px | `16` | 4–48 |  |
| Radius | Number, px | `10` | 0–999 | 999 gives a pill. |
| Text size | Number, px | `14` | 11–22 |  |
| Weight | Choice | `500` | 400 · 500 · 600 · 700 · 800 |  |
| Case | Choice | `As typed` | As typed · Upper case |  |
| Primary, Primary text, Primary on hover | Colour | `#0a0a0a`, `#ffffff`, `#262626` |  |  |
| Secondary, Secondary text, Secondary line, Secondary on hover | Colour | `#ffffff`, `#0a0a0a`, `#e5e5e5`, `#fafafa` |  |  |
| Text-link button | Colour | empty |  | Empty uses the accent. |

### Transcript

| Field | Type | Default | Range | Notes |
| --- | --- | --- | --- | --- |
| Height | Number, px | `168` | 80–800 | The transcript scrolls beyond this. |
| Background | Colour | empty |  | Empty uses the surface colour. |

### Motion

| Field | Type | Default | Range / options | Notes |
| --- | --- | --- | --- | --- |
| Text entrance | Choice | `Fade` | None · Fade · Rise | Text only, never the video. |
| Duration | Number, ms | `240` | 100–1200 |  |
| Hover duration | Number, ms | `200` | 0–800 |  |
| Easing | Choice | `Ease out` | Ease out · Ease in and out · Linear |  |

Every movement stops for visitors who ask for reduced motion.

## Recipes

Fields not mentioned stay on their defaults.

### A product tour beside your copy

The default. Replace the video and the words and publish.

1. **Setup → Anchor**: `product-tour`.
2. **Video → Video from**: *Link*, and paste the YouTube or Vimeo link. Or keep *Uploaded video file* and pick your MP4.
3. **Cover image**: a frame from the video that shows the product, at 1600px or wider.
4. **Video title**, **Description**, **Upload date**, **Length**: the real values. Google uses them.
5. **Chapters**: three or four, at the points a visitor would want to skip to.
6. **Text** and **Buttons**: your words. The first button plays the video; set a second to *Open a link* to your sign-up page.
7. **Setup → First block on the page**: on, if this is the first thing on the page.

### A homepage hero with a background video

1. **Setup → What this block does**: *Hero*.
2. **Video → Video from**: *Uploaded video file*. A 10 to 20 second MP4 with no sound track, under 6 MB. Add a WebM of it too if you have one.
3. **Cover image**: the video's first frame, so the switch from image to video is invisible.
4. **Hero → On phones**: *Show the cover only*, or *Play the phone file* with a portrait MP4 under 2 MB in **Phone video file**. Add a **Phone cover** in the same portrait shape.
5. **Text → Heading level**: *H1*.
6. **Style → Hero → Overlay**: *Dark veil from the text side* for light text on busy footage, or keep the light veil for dark text. Check the text against the brightest frame of the video.
7. **Hero → Full video button**: on, with your full-length video under **Full video**, if there is one. That is the video Google is told about.

### A customer story in a lightbox, with a form at the end

1. **Section → How it plays**: *In a lightbox*. **Text position**: *Right of the video*.
2. **Video → Video from**: *Link*, with the YouTube interview. **Playback → Privacy mode**: on.
3. **Form → Form**: your demo request form.
4. For a form under the video when it ends instead, set **How it plays** to *In place*, **End screen** on, **Show the form instead of the button** on.

### A silent loop where a GIF used to be

1. **Section → How it plays**: *Silent loop, like a GIF*.
2. **Video → Video from**: *Uploaded video file*, a short MP4 with no sound track. A screen recording exported as MP4 is a fraction of the size of the same GIF and sharper.
3. **Shape**: the recording's real shape, *4:5 (portrait)* for a phone screen.
4. **Section → Sound button on the loop**: on only if the clip has sound worth hearing.

### A webinar archive with categories, search and a form gate

1. **Setup → What this block does**: *Library*. **Setup → Anchor**: `webinars`.
2. **Videos**: one row per recording, each with its **Cover image**, **Title**, **Description**, **Upload date**, **Length**, a **Category** (*Webinars*, *Tutorials*, *Customer stories*) and **Tags** (`Onboarding, Reporting`).
3. **Library → Layout**: *Grid*. **Filter look**: *Pills*. **Topic filter**, **Search**, **Sort menu**: on. **Order**: *Newest first*.
4. **Featured** on for the recording you most want watched.
5. **Files**: the slides as a PDF, for the lightbox's Files tab.
6. To collect leads: **Needs the form** on for the recordings to gate, and **Library → Form for gated videos** set to your form.
7. **Lightbox → Share links**: on, so sales can send a link to minute 12 of a recording.

### An upcoming webinar that becomes its own replay

1. Add a row with the webinar's **Title**, **Cover image** and **Category**.
2. **Live session starts** and **Live session ends**: the real times. **Register link**: the registration page. **Join link**: the meeting link.
3. Leave the video empty for now. The card reads *Upcoming*, then *Live now*, then *Replay soon*.
4. After the session, paste the recording's link into the row. The card becomes a video.

### A tutorials slider

1. **Library → Layout**: *Slider*. **Arrows** and **Dots**: on.
2. Each row: a **Hover preview clip**, three to five silent seconds of the tutorial, so a pointer over the card shows what it covers.
3. **Style → Slider → Cards in view**: 3 on desktop, 1.15 on phones.

### A course as a playlist

1. **Library → Layout**: *Playlist: player with a list*. **Play the next video when one ends**: on.
2. Rows in lesson order. **Order**: *As listed*.
3. **List on phones**: *Rows under the player* for a short course, *Dropdown* for a long one.

### A watch page that Google can find

1. A page of its own for the one video, with a Section block at the top.
2. **Playback → Loading**: *Player in the page*. **Section → How it plays**: *In place*.
3. Every field Google reads: **Video title**, **Description**, **Upload date**, **Length**, **Cover image**, **Chapters**, **Transcript** (*Folded* or *Open*).
4. Publish, then run the page through Google's Rich Results Test.

## Tracking

With **Tracking → Send events to dataLayer (GA4, GTM)** on, the module pushes events to `window.dataLayer` for Google Tag Manager. It creates `dataLayer` if the page has none. Nothing is sent anywhere else, and nothing is pushed from the page editor.

```
window.dataLayer.push({
  event: 'video_pro_start',         // <prefix>_<name>
  video_title: 'Pricing walkthrough',
  video_url: 'https://www.youtube.com/watch?v=…',
  video_provider: 'youtube',        // youtube, vimeo, wistia, vidyard, loom, file, mp4, hubspot, embed
  video_position: 0,                // seconds
  video_duration: 112,              // seconds
  video_percent: 0,
  module_anchor: 'webinars',
  job: 'library'                    // section, hero or library
});
```

| Event | When |
| --- | --- |
| `<prefix>_start` | The first play of a video. |
| `<prefix>_pause` | A pause. |
| `<prefix>_progress` | At 25, 50 and 75 %, with **25, 50 and 75 % events** on. `video_percent` says which. |
| `<prefix>_complete` | The video reaches its end. |
| `<prefix>_lightbox_open`, `<prefix>_lightbox_close` | The lightbox opens or closes. |
| `<prefix>_filter`, `<prefix>_search` | A visitor filters or searches a library. |
| `<prefix>_gate_unlock` | The gate form is sent and a gated video opens. |
| `<prefix>_share` | A share link is used. |
| `<prefix>_cta_click` | The end screen button is pressed. |

Progress and completion come from uploaded files, `.mp4` links, YouTube, Vimeo and Wistia. Loom, Vidyard and embed code report only that the video started and the lightbox closed.

**In Google Tag Manager:** add a **Custom Event** trigger matching `video_pro_.*` (with **Use regex matching**), and **Data Layer Variables** for `video_title`, `video_percent` and the rest. Send them on to GA4 as event parameters.

**Without Tag Manager**, the same details are dispatched on the block as `video-pro:<name>` events, whether or not the dataLayer switch is on:

```
document.addEventListener('video-pro:complete', function (e) {
  console.log(e.detail.video_title, e.detail.video_duration);
});
```

## Accessibility

### Keyboard

- Every play button, card, chapter, transcript line, tab, filter and slider control is a real `<button>`, link or form field, reachable with Tab and pressed with Enter or Space.
- The lightbox is a native `<dialog>`: the page behind is out of reach for the keyboard and screen readers, Tab stays inside, and **Esc** always closes it. Left and right arrows move to the previous and next video.
- `/` jumps to a library's search box when one is on screen.
- Focus rings show on every control on keyboard use, in **Style → Colours → Focus ring**.

### Focus

- **Opening the lightbox** moves focus to the player. **Closing it** returns focus to the card or button that opened it, without scrolling the page.
- **Pressing play in place** moves focus into the player that replaced the cover.

### Spoken labels

- A play button is named *Play video: {title}*. The cover keeps its own alt text.
- The lightbox is named by the video title.
- Category tabs are toggle buttons in a labelled group, and say which one is pressed. The number of results after a filter or search is read out.
- The playlist marks the playing row. On phones its dropdown is a native select.
- *Live now*, *Upcoming* and *New* are words on the badge, never colour alone.
- Every icon the module draws is decorative and hidden from screen readers.

### Motion

For visitors whose device asks for reduced motion: the Hero shows its cover and does not play, the pause button becomes a play button, parallax is off, the slider does not autoplay, hover previews do not play, the silent loop shows its cover with a play button, and text appears without movement. A video the visitor starts plays as normal.

Every moving thing can be stopped: the Hero and the silent loop have a pause button, the slider's autoplay has a pause button and pauses on hover and focus.

### Captions and transcript

Captions on uploaded files and `.mp4` links, and a transcript for every source, cover the WCAG requirements for recorded video. The host players (YouTube, Vimeo and the rest) show the captions you upload to the host.

### Content you are responsible for

- Alt text on every cover image. Leave it empty only when the title says the same.
- Captions and a transcript for every video with speech.
- Colour contrast. The defaults pass WCAG AA on white; every colour is a field, so a low-contrast pair is possible. On a Hero, check the text against the brightest frame of the video, with the overlay you picked.
- **Heading level** that fits the page outline. One H1 per page.
- Touch targets. **Style → Play button → Height on phones** cannot go under 44px; keep buttons at 40px or more.

## Troubleshooting

**The video won't play.** Check the editor hints first: an unrecognised link is quoted there. Then, in order: the link is the video's own page or share link (a channel, playlist or search page is not a video); the video allows embedding on the host; it is public or unlisted, and an unlisted Vimeo link includes the code after the last slash; for an uploaded file, it is MP4 with H.264 video (a `.mov` or an HEVC MP4 plays in Safari only).

**The frame says "This video can't be played here."** YouTube or Vimeo refused it: the video is private, deleted, blocked in the visitor's country, or does not allow embedding. The message carries a link to watch it on the host. Fix the setting on the host; nothing in the module changes it.

**A private video does not play.** A private YouTube video plays for nobody outside the owner's account, on any site. Make it *Unlisted*. A private Vimeo video plays only on the domains you allow under **Privacy → Where can this be embedded?**, and needs the full link with its code. For a video that should stay off the public web, upload the file to HubSpot or use a HubSpot video.

**The background video does not play on an iPhone.** That is the cover doing its job. iPhones refuse any video that starts by itself in Low Power Mode, and the module also holds it back when **Hero → On phones** is *Show the cover only* (the default), when the visitor has data saver on, or when they ask for reduced motion. To play on phones, set **On phones** to *Play the phone file* with a small portrait MP4. With Low Power Mode on, the cover stays, and the pause button reads *Play* so the visitor can start it.

**The background video does not play anywhere.** The source is a HubSpot video, a Wistia, Vidyard or Loom link, or embed code. A Hero background plays uploaded files, `.mp4` links, YouTube and Vimeo. Or the visitor pressed pause earlier in the visit; it stays paused until they press play.

**The video plays without sound.** The Hero background and the silent loop are always muted; a sound button on the loop is **Section → Sound button on the loop**. A video in the lightbox opened from a share link may need one press before sound is allowed: browsers only allow sound after the visitor has done something on the page.

**The cover is a grey box.** There is no **Cover image** and the source is not YouTube. Upload one. Vimeo, Wistia, Vidyard, Loom, HubSpot video and files do not give the module their cover.

**The editor says the video is not sent to Google.** It has no **Video title**, or no cover image, or it is embed code. Add the first two; embed code is never described.

**Google's Rich Results Test finds no video.** Test the published page's address. Structured data is not printed in the editor or its preview. Check **SEO → Describe videos to Google** is on, and the editor shows no *Not sent to Google* hint.

**Google shows the page but no video thumbnail or key moments.** The structured data is a description; showing it is Google's decision, and it can take weeks after a crawl. Give the video a page of its own with *Player in the page*, fill every field Google reads, and request indexing in Search Console. See [What Google gets](https://www.nopethemes.com/video-pro#what-google-gets).

**Captions do not appear.** Captions show on uploaded files and `.mp4` links only. The caption file must be WebVTT (`.vtt`, not `.srt`) and uploaded to HubSpot Files; a file on another domain is blocked unless that server allows it. Turn **On by default** on for one track, or pick it in the player's captions menu.

**Transcript lines are not clickable.** The time must start the paragraph, followed by a space: `1:05 Text`. One paragraph per line, made with Enter; a line break inside a paragraph does not count.

**A chapter link opens the page at the top.** The chapter's **Starts at** could not be read, and the editor names it. Use `m:ss` or `h:mm:ss`.

**Two category tabs for the same thing.** **Category** is typed per row, and `Webinars` and `webinars` are two categories. Make them match.

**A share link opens the page but not the video.** The anchor in the link does not match **Setup → Anchor**, or the row's **Link name** changed after the link was shared. Copy the link again from the lightbox.

**A gated video opens without the form.** The visitor already filled it in, within **Remember the form for** days, on this or another library with the same **Gate name**. In the editor, gated videos always play. To see the gate again, open the page in a private window.

**The theme's styles change the play button, headings or images.** The module's rules carry the weight of an id selector, which wins over a theme's general rules for buttons, images, videos and headings. When a theme still reaches in, it is usually a rule aimed at every element on the page with `!important`. Set the look you want in the Style tab first; if the theme still overrides it, write to us with the page address and we fix it in the module. **Advanced → Extra class** is there for your own theme rules, and the module never relies on it.

**The lightbox opens behind my sticky header.** It does not: the lightbox opens in the browser's top layer, above every z-index. If something covers it, that element is itself in the top layer, such as another dialog left open.

**Changing a Style tab value does nothing on the live page.** The page has not been republished, or HubSpot's cache has not caught up. Republish and give it a minute.

**The page jumps when the video loads.** The **Shape** does not match the video. A vertical video in a 16:9 frame shows black bars, and a wrong shape in a playlist moves the list. Set the video's real shape.

**The Hero is taller or shorter than expected on a phone.** **Style → Hero → Height on phones** is a share of the screen height (75), with **Minimum height** (560px) as a floor. Lower the minimum for a short hero on phones.

## FAQ

**Does it slow my page down?** Not before a press of play. A host video is a cover image and a button until then; an uploaded file is a `<video>` element that downloads nothing. A Hero's background starts after the page has loaded. The exception you choose yourself is *Player in the page*.

**Will my videos show up in Google's video results?** The module gives Google a complete, valid description of each video, which makes it eligible. Google decides what to show. A page built around one video, with every field Google reads filled in, stands the best chance.

**YouTube, Vimeo, HubSpot video or my own file: which should I use?** For reach and search, YouTube: the video is found on YouTube and on your page. For a clean player with no suggested videos and control over privacy, Vimeo. For a short loop or a hero background, an uploaded MP4. HubSpot video ties views to your CRM contacts, and is the weakest for search because HubSpot does not share its player address with modules.

**Do I need a cookie banner for YouTube?** With **Privacy mode** on and your own cover image, nothing from YouTube loads until a visitor presses play, and the player then comes from youtube-nocookie.com. Whether your banner must ask before that press is a question for your own privacy policy; the module loads nothing from the host before it.

**Can I use one video in more than one place on a page?** Yes. Turn **SEO → Describe videos to Google** off on all but one of the blocks, so Google gets one description.

**How many videos can a library hold?** Up to 60 rows per block. For more, split them by topic across several blocks or pages.

**Can I translate the buttons and labels?** Every word the module prints is in the **Words** group.

**Does the form gate protect my video?** It collects leads. The video's address is in the page source, so anyone determined can watch it without the form. For a video that must stay private, put it on a password-protected page or a private membership page.

**Does it work on blog posts?** Yes: site pages, landing pages, blog posts and blog listings.

**Can I start a video at a set time from a link?** Add `?t=90` to the page address for a Section, or use **Copy link** in the lightbox for a library video, then add `&t=90`.

## What it does not do

- **It does not fetch anything from the video host.** Title, length, date and cover are typed by you, because HubSpot modules cannot ask YouTube or Vimeo for them. The editor lists what is missing.
- **It does not show view counts from YouTube.** **View count** is a number you type.
- **It does not promise rich results.** It describes the video; Google decides what to show.
- **It does not describe the Hero's background loop to Google**, or a video added as embed code.
- **It does not style the host's player.** YouTube, Vimeo and the others draw their own controls inside their frame; the module styles the cover, the play button and everything around them.
- **It does not caption YouTube or Vimeo videos.** Upload captions to the host.
- **It does not store analytics.** It emits events; your analytics tool counts them.
- **It does not lock videos.** The form gate is for lead capture.
- **It does not use HubDB.** Library rows live in the module.
- **It does not play audio-only files** such as MP3 podcasts.
- **It does not play anything by itself in the page editor.**
- **It sets no cookies.** It keeps a library's resume points, a passed gate and a paused hero in the visitor's browser storage, and nothing leaves the browser. The only outside requests are the player you choose, after a press of play (or as the page loads with *Player in the page*, or for a YouTube or Vimeo hero background), YouTube's cover image when you upload none, and a Google Fonts stylesheet when a font field names a Google family.

## Notes on this page

Every demo above is an instance of the module on the same container as its text. The videos are Studio Nope's own; the hero loop is a free stock clip. The form on the locked video is a real HubSpot form on this site. No CSS on this page touches the module.

Locked videos and watched positions are remembered in your browser.

Reset the demo

 to start again.

[![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) Video Hero, Gallery & Popup Pro · Studio Nope [Get the module](https://ecosystem.hubspot.com/marketplace/website)

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.nopethemes.com/video-pro#hero-demo",
  "@type" : "VideoObject",
  "caption" : [ {
    "@type" : "MediaObject",
    "contentUrl" : "https://www.nopethemes.com/hubfs/video-pro/video-pro-overview.vtt",
    "encodingFormat" : "text/vtt",
    "inLanguage" : "en"
  } ],
  "contentUrl" : "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-loop.mp4",
  "description" : "A short look at a bright open-plan office where a team works at shared desks.",
  "duration" : "PT10S",
  "hasPart" : [ {
    "@type" : "Clip",
    "endOffset" : 4,
    "name" : "The office",
    "startOffset" : 0,
    "url" : "https://www.nopethemes.com/video-pro?t=0"
  }, {
    "@type" : "Clip",
    "endOffset" : 7,
    "name" : "The team",
    "startOffset" : 4,
    "url" : "https://www.nopethemes.com/video-pro?t=4"
  }, {
    "@type" : "Clip",
    "endOffset" : 10,
    "name" : "The floor",
    "startOffset" : 7,
    "url" : "https://www.nopethemes.com/video-pro?t=7"
  } ],
  "inLanguage" : "en",
  "name" : "Product overview",
  "thumbnailUrl" : [ "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-poster.jpg" ],
  "transcript" : "0:00 A bright open-plan office, seen from above. 0:04 People work at long shared desks below. 0:07 The view drifts slowly across the floor.",
  "uploadDate" : "2026-10-30T00:00:00+00:00"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.nopethemes.com/video-pro#video-pro-vp_2",
  "@type" : "VideoObject",
  "caption" : [ {
    "@type" : "MediaObject",
    "contentUrl" : "https://www.nopethemes.com/hubfs/video-pro/video-pro-overview.vtt",
    "encodingFormat" : "text/vtt",
    "inLanguage" : "en"
  } ],
  "contentUrl" : "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-loop.mp4",
  "description" : "A short look at a bright open-plan office where a team works at shared desks.",
  "duration" : "PT10S",
  "hasPart" : [ {
    "@type" : "Clip",
    "endOffset" : 4,
    "name" : "The office",
    "startOffset" : 0,
    "url" : "https://www.nopethemes.com/video-pro?t=0"
  }, {
    "@type" : "Clip",
    "endOffset" : 7,
    "name" : "The team",
    "startOffset" : 4,
    "url" : "https://www.nopethemes.com/video-pro?t=4"
  }, {
    "@type" : "Clip",
    "endOffset" : 10,
    "name" : "The floor",
    "startOffset" : 7,
    "url" : "https://www.nopethemes.com/video-pro?t=7"
  } ],
  "inLanguage" : "en",
  "name" : "Product overview",
  "thumbnailUrl" : [ "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-poster.jpg" ],
  "transcript" : "0:00 A bright open-plan office, seen from above. 0:04 People work at long shared desks below. 0:07 The view drifts slowly across the floor.",
  "uploadDate" : "2026-10-30T00:00:00+00:00"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.nopethemes.com/video-pro#video-pro-vp_3",
  "@type" : "VideoObject",
  "description" : "A wealth management site with a retirement calculator, a fee calculator and the page templates around them.",
  "duration" : "PT1M56S",
  "embedUrl" : "https://www.youtube.com/embed/SWYO_O-LRbo",
  "hasPart" : [ {
    "@type" : "Clip",
    "endOffset" : 38,
    "name" : "The homepage",
    "startOffset" : 0,
    "url" : "https://www.nopethemes.com/video-pro?t=0"
  }, {
    "@type" : "Clip",
    "endOffset" : 72,
    "name" : "Retirement calculator",
    "startOffset" : 38,
    "url" : "https://www.nopethemes.com/video-pro?t=38"
  }, {
    "@type" : "Clip",
    "endOffset" : 116,
    "name" : "Fee calculator and templates",
    "startOffset" : 72,
    "url" : "https://www.nopethemes.com/video-pro?t=72"
  } ],
  "inLanguage" : "en",
  "name" : "Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators",
  "thumbnailUrl" : [ "https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg" ],
  "uploadDate" : "2026-10-21T00:00:00+00:00"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.nopethemes.com/video-pro#video-pro-vp_4",
  "@type" : "VideoObject",
  "contentUrl" : "https://www.nopethemes.com/hubfs/video-pro/video-pro-short.mp4",
  "description" : "The short version of the Popup & Modal Pro tour, shot for phones.",
  "duration" : "PT30S",
  "inLanguage" : "en",
  "name" : "Popup & Modal Pro in 30 seconds",
  "potentialAction" : {
    "@type" : "SeekToAction",
    "startOffset-input" : "required name=seek_to_second_number",
    "target" : "https://www.nopethemes.com/video-pro?t={seek_to_second_number}"
  },
  "thumbnailUrl" : [ "https://www.nopethemes.com/hubfs/video-pro/video-pro-short-poster-sheet.jpg" ],
  "uploadDate" : "2026-09-28T00:00:00+00:00"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "Event",
  "description" : "A 45-minute live build of a video library page, with questions at the end.",
  "endDate" : "2026-11-29T16:45:00+00:00",
  "eventAttendanceMode" : "https://schema.org/OnlineEventAttendanceMode",
  "eventStatus" : "https://schema.org/EventScheduled",
  "image" : [ "https://www.nopethemes.com/hubfs/video-pro/video-pro-team-workshop.jpg" ],
  "location" : {
    "@type" : "VirtualLocation",
    "url" : "https://www.nopethemes.com/video-pro#library"
  },
  "name" : "Live: build a video library page in HubSpot",
  "organizer" : {
    "@type" : "Organization",
    "name" : "Studio Nope",
    "url" : "https://www.studionope.com"
  },
  "startDate" : "2026-11-29T16:00:00+00:00"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "A wealth management site with a retirement calculator, a fee calculator and the page templates around them.",
      "duration" : "PT1M56S",
      "embedUrl" : "https://www.youtube.com/embed/SWYO_O-LRbo",
      "hasPart" : [ {
        "@type" : "Clip",
        "endOffset" : 38,
        "name" : "The homepage",
        "startOffset" : 0,
        "url" : "https://www.nopethemes.com/video-pro?video=library.harrington-co-for-hubspot-wealth-management-theme-with-retir&t=0"
      }, {
        "@type" : "Clip",
        "endOffset" : 72,
        "name" : "Retirement calculator",
        "startOffset" : 38,
        "url" : "https://www.nopethemes.com/video-pro?video=library.harrington-co-for-hubspot-wealth-management-theme-with-retir&t=38"
      }, {
        "@type" : "Clip",
        "endOffset" : 116,
        "name" : "Fee calculator and templates",
        "startOffset" : 72,
        "url" : "https://www.nopethemes.com/video-pro?video=library.harrington-co-for-hubspot-wealth-management-theme-with-retir&t=72"
      } ],
      "inLanguage" : "en",
      "name" : "Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg" ],
      "uploadDate" : "2026-10-21T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.harrington-co-for-hubspot-wealth-management-theme-with-retir"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "An accounting firm site with a tax calculator, a fee table and a calendar of filing deadlines.",
      "duration" : "PT1M47S",
      "embedUrl" : "https://www.youtube.com/embed/vMfHsZSDffk",
      "inLanguage" : "en",
      "name" : "Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/vMfHsZSDffk/hqdefault.jpg" ],
      "uploadDate" : "2026-10-14T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.tickmark-for-hubspot-accounting-theme-with-a-tax-calculator"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "A photographer’s site that opens on a turning ring of photos and scrolls through the work.",
      "duration" : "PT2M1S",
      "embedUrl" : "https://www.youtube.com/embed/N34-OASZBnI",
      "inLanguage" : "en",
      "name" : "Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/N34-OASZBnI/hqdefault.jpg" ],
      "uploadDate" : "2026-09-30T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.lumen-for-hubspot-photography-theme-with-a-3d-ring-scroll-de"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "A file library with search, filters and a basket that downloads several files at once.",
      "duration" : "PT1M36S",
      "embedUrl" : "https://www.youtube.com/embed/YxWp1AcSX_k",
      "inLanguage" : "en",
      "name" : "Download Center Pro for HubSpot: A File Library with Search, Filters and Multi-File Downloads",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/YxWp1AcSX_k/hqdefault.jpg" ],
      "uploadDate" : "2026-09-18T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.download-center-pro-for-hubspot-a-file-library-with-search-f"
    },
    "position" : 4
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "Search, articles and a way to reach support, all on one page.",
      "duration" : "PT1M26S",
      "embedUrl" : "https://www.youtube.com/embed/ihENdtvacDU",
      "inLanguage" : "en",
      "name" : "HubSpot Help Center: Search, Articles and Support on One Page",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/ihENdtvacDU/hqdefault.jpg" ],
      "uploadDate" : "2026-09-09T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.hubspot-help-center-search-articles-and-support-on-one-page"
    },
    "position" : 5
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "Move a live HubSpot site to a new theme one page at a time, with the old one still serving visitors.",
      "duration" : "PT4M7S",
      "embedUrl" : "https://www.youtube.com/embed/-ysb4RzRqmQ",
      "hasPart" : [ {
        "@type" : "Clip",
        "endOffset" : 65,
        "name" : "Why switching breaks sites",
        "startOffset" : 0,
        "url" : "https://www.nopethemes.com/video-pro?video=library.how-to-change-your-hubspot-theme-without-breaking-your-site&t=0"
      }, {
        "@type" : "Clip",
        "endOffset" : 150,
        "name" : "Clone the pages",
        "startOffset" : 65,
        "url" : "https://www.nopethemes.com/video-pro?video=library.how-to-change-your-hubspot-theme-without-breaking-your-site&t=65"
      }, {
        "@type" : "Clip",
        "endOffset" : 220,
        "name" : "Swap templates one at a time",
        "startOffset" : 150,
        "url" : "https://www.nopethemes.com/video-pro?video=library.how-to-change-your-hubspot-theme-without-breaking-your-site&t=150"
      }, {
        "@type" : "Clip",
        "endOffset" : 247,
        "name" : "Check and publish",
        "startOffset" : 220,
        "url" : "https://www.nopethemes.com/video-pro?video=library.how-to-change-your-hubspot-theme-without-breaking-your-site&t=220"
      } ],
      "inLanguage" : "en",
      "name" : "How to Change Your HubSpot Theme Without Breaking Your Site",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/-ysb4RzRqmQ/hqdefault.jpg" ],
      "uploadDate" : "2026-08-27T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.how-to-change-your-hubspot-theme-without-breaking-your-site"
    },
    "position" : 6
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "One theme set up for a clinic, a law firm and a software company, page by page.",
      "duration" : "PT1M36S",
      "embedUrl" : "https://www.youtube.com/embed/WH9T0DXrA0A",
      "inLanguage" : "en",
      "name" : "Studio Nope Official for HubSpot: One Theme, Any Business",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/WH9T0DXrA0A/hqdefault.jpg" ],
      "uploadDate" : "2026-08-12T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.studio-nope-official-for-hubspot-one-theme-any-business"
    },
    "position" : 7
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "Mega menus, plain dropdowns and a mobile menu from one module.",
      "duration" : "PT1M39S",
      "embedUrl" : "https://www.youtube.com/embed/mRWu3-YkeNA",
      "inLanguage" : "en",
      "name" : "Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/mRWu3-YkeNA/hqdefault.jpg" ],
      "uploadDate" : "2026-08-05T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.mega-menu-pro-for-hubspot-mega-menus-dropdowns-and-a-mobile"
    },
    "position" : 8
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "author" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "creator" : {
        "@type" : "Organization",
        "name" : "Studio Nope",
        "url" : "https://www.studionope.com"
      },
      "description" : "Create, edit and upload a custom module from the terminal with the HubSpot CLI.",
      "duration" : "PT2M26S",
      "embedUrl" : "https://www.youtube.com/embed/CSXVoGoPBc8",
      "inLanguage" : "en",
      "name" : "HubSpot Custom Module in 2 Minutes: Built with the HubSpot CLI 2026",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/CSXVoGoPBc8/hqdefault.jpg" ],
      "uploadDate" : "2026-07-22T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=library.hubspot-custom-module-in-2-minutes-built-with-the-hubspot-cl"
    },
    "position" : 9
  } ],
  "name" : "Every theme and module, at work",
  "numberOfItems" : 9
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "One theme set up for a clinic, a law firm and a software company, page by page.",
      "duration" : "PT1M36S",
      "embedUrl" : "https://www.youtube.com/embed/WH9T0DXrA0A",
      "inLanguage" : "en",
      "name" : "Studio Nope Official for HubSpot: One Theme, Any Business",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/WH9T0DXrA0A/hqdefault.jpg" ],
      "uploadDate" : "2026-08-12T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.studio-nope-official-for-hubspot-one-theme-any-business"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "A wealth management site with a retirement calculator, a fee calculator and the page templates around them.",
      "duration" : "PT1M56S",
      "embedUrl" : "https://www.youtube.com/embed/SWYO_O-LRbo",
      "inLanguage" : "en",
      "name" : "Harrington & Co for HubSpot: Wealth Management Theme with Retirement and Fee Calculators",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/SWYO_O-LRbo/hqdefault.jpg" ],
      "uploadDate" : "2026-10-21T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.harrington-co-for-hubspot-wealth-management-theme-with-retir"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "contentUrl" : "https://www.nopethemes.com/hubfs/video-pro/video-pro-short.mp4",
      "description" : "The short version, shot for phones.",
      "duration" : "PT30S",
      "inLanguage" : "en",
      "name" : "Popup & Modal Pro in 30 seconds",
      "potentialAction" : {
        "@type" : "SeekToAction",
        "startOffset-input" : "required name=seek_to_second_number",
        "target" : "https://www.nopethemes.com/video-pro?video=tours.popup-modal-pro-in-30-seconds&t={seek_to_second_number}"
      },
      "thumbnailUrl" : [ "https://www.nopethemes.com/hubfs/video-pro/video-pro-short-poster-sheet.jpg" ],
      "uploadDate" : "2026-09-28T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.popup-modal-pro-in-30-seconds"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "An accounting firm site with a tax calculator, a fee table and a calendar of filing deadlines.",
      "duration" : "PT1M47S",
      "embedUrl" : "https://www.youtube.com/embed/vMfHsZSDffk",
      "inLanguage" : "en",
      "name" : "Tickmark for HubSpot: Accounting Theme with a Tax Calculator, Fees and a Tax Calendar",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/vMfHsZSDffk/hqdefault.jpg" ],
      "uploadDate" : "2026-10-14T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.tickmark-for-hubspot-accounting-theme-with-a-tax-calculator"
    },
    "position" : 4
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "A photographer’s site that opens on a turning ring of photos and scrolls through the work.",
      "duration" : "PT2M1S",
      "embedUrl" : "https://www.youtube.com/embed/N34-OASZBnI",
      "inLanguage" : "en",
      "name" : "Lumen for HubSpot: Photography Theme with a 3D Ring, Scroll Deck and Gallery",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/N34-OASZBnI/hqdefault.jpg" ],
      "uploadDate" : "2026-09-30T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.lumen-for-hubspot-photography-theme-with-a-3d-ring-scroll-de"
    },
    "position" : 5
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "Mega menus, plain dropdowns and a mobile menu from one module.",
      "duration" : "PT1M39S",
      "embedUrl" : "https://www.youtube.com/embed/mRWu3-YkeNA",
      "inLanguage" : "en",
      "name" : "Mega Menu Pro for HubSpot: Mega Menus, Dropdowns and a Mobile Menu",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/mRWu3-YkeNA/hqdefault.jpg" ],
      "uploadDate" : "2026-08-05T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=tours.mega-menu-pro-for-hubspot-mega-menus-dropdowns-and-a-mobile"
    },
    "position" : 6
  } ],
  "name" : "Start with a theme tour",
  "numberOfItems" : 6
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "caption" : [ {
        "@type" : "MediaObject",
        "contentUrl" : "https://www.nopethemes.com/hubfs/video-pro/video-pro-overview.vtt",
        "encodingFormat" : "text/vtt",
        "inLanguage" : "en"
      } ],
      "contentUrl" : "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-loop.mp4",
      "description" : "A short look at a bright open-plan office where a team works at shared desks.",
      "duration" : "PT1M16S",
      "hasPart" : [ {
        "@type" : "Clip",
        "endOffset" : 4,
        "name" : "The office",
        "startOffset" : 0,
        "url" : "https://www.nopethemes.com/video-pro?video=course.a-popup-module-start-to-finish&t=0"
      }, {
        "@type" : "Clip",
        "endOffset" : 7,
        "name" : "The team",
        "startOffset" : 4,
        "url" : "https://www.nopethemes.com/video-pro?video=course.a-popup-module-start-to-finish&t=4"
      }, {
        "@type" : "Clip",
        "endOffset" : 76,
        "name" : "The floor",
        "startOffset" : 7,
        "url" : "https://www.nopethemes.com/video-pro?video=course.a-popup-module-start-to-finish&t=7"
      } ],
      "inLanguage" : "en",
      "name" : "A popup module, start to finish",
      "thumbnailUrl" : [ "https://147657014.fs1.hubspotusercontent-eu1.net/hubfs/147657014/video-pro/video-pro-hero-poster.jpg" ],
      "transcript" : "0:00 A bright open-plan office, seen from above. 0:04 People work at long shared desks below. 0:07 The view drifts slowly across the floor.",
      "uploadDate" : "2026-10-30T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=course.a-popup-module-start-to-finish"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "Create, edit and upload a custom module from the terminal with the HubSpot CLI.",
      "duration" : "PT2M26S",
      "embedUrl" : "https://www.youtube.com/embed/CSXVoGoPBc8",
      "inLanguage" : "en",
      "name" : "Build a custom module with the HubSpot CLI",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/CSXVoGoPBc8/hqdefault.jpg" ],
      "uploadDate" : "2026-07-22T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=course.build-a-custom-module-with-the-hubspot-cli"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "Move a live HubSpot site to a new theme one page at a time, with the old one still serving visitors.",
      "duration" : "PT4M7S",
      "embedUrl" : "https://www.youtube.com/embed/-ysb4RzRqmQ",
      "inLanguage" : "en",
      "name" : "Change your theme without breaking the site",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/-ysb4RzRqmQ/hqdefault.jpg" ],
      "uploadDate" : "2026-08-27T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=course.change-your-theme-without-breaking-the-site"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "VideoObject",
      "description" : "Search, articles and a way to reach support, all on one page.",
      "duration" : "PT1M26S",
      "embedUrl" : "https://www.youtube.com/embed/ihENdtvacDU",
      "inLanguage" : "en",
      "name" : "Put search, articles and support on one page",
      "thumbnailUrl" : [ "https://i.ytimg.com/vi/ihENdtvacDU/hqdefault.jpg" ],
      "uploadDate" : "2026-09-09T00:00:00+00:00",
      "url" : "https://www.nopethemes.com/video-pro?video=course.put-search-articles-and-support-on-one-page"
    },
    "position" : 4
  } ],
  "name" : "Build on HubSpot in four short lessons",
  "numberOfItems" : 4
}
```