Documentation

1. Introduction

Welcome to the Video Pop-up Module documentation! This guide will help you understand how to install, configure, and customize the module for your HubSpot website.

The Video Pop-up Module allows you to embed YouTube, Vimeo, and custom videos in a responsive lightbox popup, creating a sleek and engaging user experience. Whether you want to showcase a product demo, tutorial, marketing video, or testimonial, this module is easy to use and requires no coding skills.

 

 

2. Installation and Setup

2.1 Install the Module from the HubSpot Marketplace
  1. Locate the Module: Search for “Video Pop-Up Module” in the HubSpot Marketplace. 
  2. Click Purchase Module
  3. Select Your HubSpot Account: Choose which HubSpot portal to install the module in.
  4. Complete the Installation: Follow the prompts and await the installation confirmation.

CleanShot 2025-02-18 at 23.54.22@2x

 

2.2 Add the Module to a Page or Template
  1. Open Your HubSpot CMS: Navigate to Content > Website Pages (or Landing Pages, if applicable).
  2. Edit or Create a Page: Click Edit on an existing page or create a new one.
  3. Drag & Drop the Module: In the Modules tab, find the Video Pop-Up Module and drag it into your page layout.
  4. Apply and Publish: Click Publish or Update to push your changes live.

 

 

3. Module Configuration

3.1 Video Button Styling

The video button is an essential part of the Popup Video Module, allowing users to interact with the video seamlessly. Here’s how you can style it:

  1. Text Color: Customize the video button text color if you want to add a label beside the play button.
  2. Play Video Icon Color: Choose the color for the play video icon, ensuring it matches your design.
  3. Video Icon Background Type: Select the background type of the play button:
    • Gradient – Apply a smooth multi-color effect for a modern look.
    • Solid – Use a single color for a clean and simple design.
  4. Video Button Size: Adjust the size of the video button background, and the play button will automatically resize for perfect alignment.
  5. Roundness: Customize the roundness of the button to make it circular or slightly rounded, depending on your preference.

Frame 1 (1)

 

3.2 Overlay Styling

The overlay effect improves the visual effect of the video popup thumbnail, creating a more attractive experience. You can adjust the following:

  1. Overlay Style:
    • Choose a Solid Color – Apply a single background color overlay.
    • Choose Gradient – Blend multiple colors for a more dynamic effect.
  2. Based on your selection, the appropriate color fields will appear for customization.

Frame 2 (1)

 

3.3 Video Content Styling

To ensure that your video popup content looks great across all devices, you can adjust the following settings:

  1. Width: Define the content width for different screen sizes:
    • Large Screens (Above 768px) – Set the width for desktops and larger displays.
    • Small Screens (Below 768px) – Optimize the width for mobile users.
     
  2. Alignment: Choose how your content is aligned within the module:
    • Left, Center, or Right Alignment based on your design needs.
  3. Spacing Around Content: Adjust the spacing (padding/margin) for better layout:
    • Desktop – Set spacing for larger screens.
    • Tablet – Optimize spacing for medium-sized screens.
    • Mobile – Ensure perfect spacing for smaller screens.

Frame 3-1

 

 

4. Best Practices for Testimonials

  • Use High-Quality Thumbnails: An attractive poster image with an overlay and a gradient play button increases clicks and engagement.
  • Optimize for Speed & Performance: Use compressed video files or embed from YouTube/Vimeo to ensure fast loading and a smooth user experience.
  • Make it Mobile-Friendly: Ensure the video popup is responsive so it works perfectly on desktop, tablet, and mobile devices.

 

 

5. Publish and Test

  1. Save Your Changes: Click Apply or Save in the HubSpot Page Editor. 
  2. Preview Your Page: Confirm that the video section displays correctly on desktop and mobile.
  3. Publish: Make your changes live so visitors can see and interact with your video section.

 

 

The Popup Video Module is a powerful tool to enhance user engagement with lightbox video popups on your HubSpot website. By following best practices, such as using high-quality videos, optimising for speed, and ensuring mobile responsiveness, you can create a seamless and interactive experience. With easy customisation options, you can tailor the design to match your brand effortlessly. Start using the Popup Video Module today and elevate your website’s video experience!


Thank you for choosing our module—happy publishing!