The Modern Video Showcase Module allows you to highlight your story, product, or service through stunning video integration combined with engaging content. Designed with flexibility and brand consistency in mind, it offers multiple layout options, customizable typography, and CTA buttons to drive user action. The module ensures smooth video playback with content, responsive design, and advanced controls for performance optimization. Perfect for landing pages, product launches, or storytelling sections, it blends video with impactful messaging to capture audience attention across all devices.

Key Features of a Modern Video Showcase Module :

• Multiple Layouts: Side-by-side (text + video), full-width video, or stacked layout.

• Background Settings: Gradient, solid color, or image background.

• Content Alignment: Left, right, center positioning for text.

• Spacing Controls: Padding & margin options for responsive adjustments.

• Card Style: Option to wrap video in a styled card with rounded corners, shadows, or borders.

• Video Sources: Support YouTube, Vimeo, or HubSpot video.

• Play Button Style: Customizable icon, color, and size.

• Primary & Secondary CTA: Add up to two buttons (e.g., Download Free, More Info).
• Customizable Headings & Descriptions: Font size, weight, and color controls.

How to Set Up the Use Modern Video Showcase in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Modern Video Showcase" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Easily enhance navigation by adding an ID to the target section and using the same ID in an anchor link. This enables a smooth scrolling effect when users click a Call-to-Action (CTA) button, improving the overall user experience.

Layout Options :  

Effortlessly showcase your story and connect with your audience through the Modern Video Showcase Module — perfect for product launches, campaign highlights, or brand storytelling. Built with flexible layouts and customizable styling, this module combines powerful video integration with engaging content and conversion-focused CTAs. With responsive design and smooth performance, it ensures your message is delivered beautifully across all devices.

• Layout 1 – Feature Highlight Video

  A design that places your video side-by-side with strong headlines, descriptive text, and conversion-ready CTAs — ideal for introducing services, features, or campaigns.

• Layout 2 – Storytelling & Experience Video

  A layout that emphasizes immersive visuals, customer journeys, or behind-the-scenes content, paired with supportive messaging that builds authentic brand connections.

• Layout 3 – Full-Width Showcase Video

  A bold layout designed to spotlight product mockups, campaign highlights, or cinematic storytelling with full-width video and sleek modern presentation.

Video Column : 

• Video Type
  Choose between HubSpot Video or iFrame embed. Perfect for flexibility when using hosted content or external platforms like YouTube and Vimeo.

• Play Button Color
  Customize the play button color with a hex code. Perfect for keeping your video controls aligned with your brand style.

Content Column :

• Heading Enable

  Toggle the main heading on or off. Great for when you want a video-focused section without extra text.

• Enter Heading

  Add and customize the main heading text. Ideal for delivering a strong, eye-catching message.

• Description Enable

  Show or hide the supporting description under your heading. Keeps the layout flexible for minimal or detailed storytelling.

• Enter Description

  Add descriptive text below the heading. Perfect for explaining your offering in 1–2 concise lines.

• CTA Show/Hide

  Enable or disable the call-to-action button. Useful if the section should be informational only.

• CTA Choice

  Select from different CTA types (e.g., Simple CTA, HubSpot CTA). Tailor the call-to-action style to your campaign.

• CTA Text

  Customize the button label. Use action-driven words like “Download Free Guidebook” or “Learn More.”

• Link Options

  Choose where your CTA directs: internal pages, external links, or files. Optionally open in a new tab and set nofollow for SEO control.

• CTA Icon

  Add or replace an icon inside your button. Great for emphasizing direction or action (e.g., arrow, play, download).

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Heading & Description Setting :

The Heading & Description Settings in Modern Video Showcase allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

CTA Setting : 

• Desktop Typography

  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.

• Mobile Typography

  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.

• Spacing

  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.

• Background

  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.

• Border

  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.

• Border Radius

  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.

• Text Transform

  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.

• Box Shadow Enable

  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.

• Alignment

  Position the CTA left, center, or right within the section. Provides flexibility depending on layout style.

Video Column Setting :

• Video Height
  Adjust the video height to fit your layout. Great for balancing video size with surrounding content.

• Corner Radius
  Round the video corners for a softer, modern look — or keep them sharp for a bold, professional style.

• Border Settings
  Add or customize a border around the video. Perfect for highlighting the video area or matching brand design.

• Spacing Controls
  Set padding and margins around the video. Helps maintain clean, responsive layouts across devices.

• Top Element Position Layout 1
  Choose where the top decorative element appears: top left or top right. Ideal for adding accents that frame the video.
• Bottom Element Position Layout 1
  Select bottom left or bottom right placement for secondary design elements. Helps balance visuals in the layout.

We hope you enjoy using our modern video showcase to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.