Rubric Documentation

Video Styles

Fields for styling a video popup.

  • Video Width [Number]
  • Overlay Background Color [Color]
  • Description [Group]
    • Text Alignment [Alignment]
    • Font [Group]
    • Links [Group]
      • Color [Color]
      • Color (Hover) [Color]
    • Background Color [Color]
    • Padding [Spacing]
  • Caption [Group]
    • Text Alignment [Group]
      • Desktop, Tablet, Mobile [Responsive Alignment]
    • Eyebrow [Group]
    • Heading [Group]
    • Subheading [Group]
    • Text [Group]
    • Padding [Spacing]
  • Play Button [Group]
    • Size [Number]
    • Color [Color]
  • Close Button [Group]
    • Size [Number]
    • Color [Color]
    • Color (Hover) [Color]

How to Use Video Styles

The Video Styles module group provides comprehensive customization options for video popup displays across your Rubric theme pages. This shared field group ensures consistent video presentation whether you’re showcasing campus tours for educational institutions, event highlights, or instructional content.

When you add a video module through the HubSpot page editor’s drag-and-drop interface, these styling controls appear in the module settings panel on the right side of your screen. The video popup functionality works particularly well on homepage hero sections, program detail pages, and event landing pages where visual storytelling enhances user engagement.

Key styling considerations for optimal results:

Set your Video Width based on your content strategy—narrower widths (600-800px) work well for testimonials or quick explainer videos, while wider settings (1000px+) suit detailed presentations or campus showcases. The overlay background color should complement your site’s color scheme while ensuring the video remains the focal point.

The Caption section offers sophisticated typography controls with responsive alignment options. Use the eyebrow text for contextual information like “Student Spotlight” or “Virtual Tour,” while the heading should clearly describe the video content. This hierarchy helps both users and search engines understand your video’s purpose.

Play and Close button customization ensures accessibility and brand consistency. Larger button sizes (60px+) improve mobile usability, especially important for education sites where users access content on various devices.

Since this is a module group, these settings automatically sync across all video modules on your site, maintaining design consistency while allowing per-module customization when needed. Test your video popups on different page templates to ensure the styling works well with your overall page layout and navigation structure.