# HubSpot Video Gallery Module

This documentation is for the HubSpot Video Gallery module created by Stephanie O'Gay Garcia

[Download](https://ecosystem.hubspot.com/marketplace/modules/video-gallery-module-by-stephanie-o-gay-garcia) | [Demo](/content/demo/video-gallery/index.html)

If you can't find the answer to your question, email me at [support@stephanieogaygarcia.com](mailto:support@stephanieogaygarcia.com)

## How does structured data/schema work?

Structured data/schema is code that's added to your website to help search engines understand the data on your page.

This module uses [the VideoObject and ItemList structured data](https://developers.google.com/search/docs/appearance/structured-data/video#video-carousel-example), which tells the search engine that there are multiple videos listed on your page. Note that Google states that the option to showcase multiple videos is currently limited to a small set of providers.

To enable structured data/schema on your Video Gallery module, click into the Contents tab and open the "</> Schema/Structured Data" tab, then select the "Enable Schema" option:

Don't forget to save after doing so!

If you want to test your page for structured data, you can use [Google's Schema Markup Testing Tool](https://developers.google.com/search/docs/appearance/structured-data).

## What configuration options are available for the Video Gallery module?

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

### Content:

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

### Styles:

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

## Contact / How can I get support?

If you're still having trouble or have any questions or feedback, contact me at [support@stephanieogaygarcia.com](mailto:support@stephanieogaygarcia.com)