1. Introduction
The Video Showcase Module helps you display videos beautifully on your HubSpot website. Whether you want to showcase testimonials, product demos, or marketing videos, this module makes it easy to create a professional and engaging video section.
With options like video grids, sliders, and popups, your videos will look great on any device. You can easily embed YouTube and Vimeo videos or upload your own, all without slowing down your website.
2. Installation and Setup
2.1 Install the Module from the HubSpot Marketplace
- Locate the Module: Search for “Video Showcase” in the HubSpot Marketplace.
- Click Purchase Module
- Select Your HubSpot Account: Choose which HubSpot portal you want to install the module in.
- Complete the Installation: Follow the prompts, and wait for the installation confirmation.
2.2 Add the Module to a Page or Template
- Open Your HubSpot CMS: Navigate to Content > Website Pages (or Landing Pages, if applicable).
- Edit or Create a Page: Click Edit on an existing page or create a new one.
- Drag & Drop the Module: In the Modules tab, find the Video Showcase Module and drag it into your page layout.
- Apply and Publish: Click Publish or Update to push your changes live.
3. Module Configuration
3.1 Layout Selection
- Grid or Slider: Choose Grid for a structured layout or Slider for a scrollable, interactive display.
- Number of Columns: Set between 1 to 6 columns to organize videos in a grid format.
- Spacing Between Columns: Adjust the pixel spacing between columns for a clean and balanced look.
3.2 Showcase Card Customization
- Spacing (Padding): Adjust the spacing around the content for Large, Medium, and Small devices to ensure a responsive design.
- Overlay: Choose between Solid or Gradient Overlay to enhance the visual appeal of your video cards.
- Border: Add a border around the card to define its structure and improve aesthetics.
- Roundness: Customize the corner roundness of the card for a sharp or soft-edged design.
- Alignment: Set the alignment of the content within the card for a balanced layout.
- Shadow: Adjust the card shadow for a depth effect, but note that the shadow option is only available for Grid Layout (not for Slider Layout).
3.3 Slider Controls Customization
- Arrow Navigation: Customize the arrow style by selecting the arrow color, background color, border, border-radius, and size (Small, Standard, or Large) for better navigation control.
- Dots Navigation: Enable dots for navigation and customize their background color, border, and roundness to match your design.
- Active Pagination Dots: Set a unique color and border style for active dots to highlight the current slide.
4. Hack: How to Apply a Background for the Showcase Card
To set a background for your Showcase Card, follow these simple steps:
1️⃣ Go to the Module and open the Style Tab.
2️⃣ Scroll to the Showcase Card section and click to expand it.
3️⃣ Find the Overlay section and open it.
4️⃣ Choose a background color – either Solid Color or Gradient Color.
5️⃣ Set the Opacity to 100% for perfect and visible background color.
6️⃣ No need to upload a poster image – leave the Poster Image field blank if you only want to use the background color.
5. Adding Videos (YouTube, Vimeo, HubSpot)
The Video Showcase Module allows you to add videos from three sources: YouTube, Vimeo, and HubSpot. Follow the steps below to embed your videos correctly:
1. Adding a YouTube Video
- Go to the YouTube video you want to add.
- Click the Share button below the video.
- A popup modal will appear – click the Copy button to copy the video link.
- Paste this link into the module’s video input field.
2. Adding a Vimeo Video
- Upload your video to Vimeo.
- Once uploaded, a page will open asking you to add video details.
- Click the Share button in the top-right corner.
- A popup will appear – at the bottom, find Link Privacy and set it to Public so all users can view it.
- Copy the video link and paste it into the module’s video input field.
3. Adding a HubSpot Video
- Select HubSpot as the video type.
- You’ll see an option to upload a video directly within the module.
- Choose your file, upload it, and the video will be embedded automatically.
By using these options, you can easily showcase videos in your HubSpot Video Showcase Module with a smooth and responsive viewing experience! 🚀
6. Steps to Create a Video Showcase Module
-
Step 1: Choose the layout – Grid or Slider – based on how you want to display your videos.
- Step 2: Configure UI Settings by selecting the elements to display or hide. If you choose the Slider Layout, you’ll also find options for navigation type (arrows or dots) and their size.
- Step 3: Go to the Style Tab and set the required columns in the "No. of Columns" section.
- Step 4: Adjust the "Spacing Between Columns" to define the gap between video cards for a well-structured layout.
- Step 5: Customize the Showcase Card by modifying spacing, borders, roundness, and overlay styles to match your design.
- Step 6: Further modify individual elements, including Caption Title, Title, Description, Video Button, Arrow Navigation, Pagination Dots, and Additional Slider Settings, for a fully personalized video showcase.
Fine-tune these settings to create a visually appealing and interactive video display on your HubSpot website!
7. Publish and Test
- Save Your Changes: Click Apply or Save in the HubSpot Page Editor.
- Preview Your Page: Confirm that the video showcase section displays correctly on desktop and mobile.
- Publish: Make your changes live so visitors can see and interact with your video showcase.
With our Video Showcase Module, you can seamlessly display videos in a grid, slider, or popup to enhance engagement and captivate your audience. By following the steps above and customising each element, you’ll create a professional, responsive, and visually appealing video showcase that aligns perfectly with your brand.
Thank you for choosing our module—happy publishing! 🚀