Features Breakdown: Fullwidth Video Hero This section is a high-impact, cinematic banner designed to showcase video content. It solves the common issue of cropping by allowing completely independent media and layout settings for Mobile versus Desktop devices.

1. Dual Media Strategy (Mobile vs. Desktop)

• Device-Specific Uploads: You can upload a distinct video (MP4) or image for Desktop (e.g., landscape) and a separate one for Mobile (e.g., vertical portrait).

• Priority Logic: The section prioritizes Video; if no video is uploaded, it falls back to the Image.

• Native Performance: Videos play automatically (Autoplay, Muted, Loop) using native browser rendering for fast loading.

2. Flexible Height & Ratios

• Three Height Modes: Choose how the section height is calculated, independently for Mobile and Desktop:

  • Fixed Ratio: Lock the aspect ratio (e.g., Cinema 21:9 or Standard 16:9 on Desktop; Story 9:16 or Portrait 3:4 on Mobile).

  • Fixed Height: Set a specific pixel height (e.g., 600px).

  • Auto (Content): The height adapts based on the amount of text and padding inside.

3. Alignment & Content Positioning

• 9-Point Alignment: Control exactly where the text sits over the video. You can adjust:

  • Vertical: Top, Center, or Bottom.

  • Horizontal: Left, Center, or Right.

  • Text Align: Left, Center, or Right text justification.

• Text Width: A slider to constrain the Max Width of the text block to ensure lines don't get too long on wide screens.

4. Advanced Buttons (Dual CTAs)

• Two Buttons: Configure a primary and secondary Call-to-Action.

• Styling Options:

  • Backgrounds: Choose solid colors or Custom Gradients.

  • Borders: Toggle borders, adjust thickness, and set border colors.

  • Shape: Adjust the Corner Radius (rounded edges).

  • Layout: Set the gap spacing between the two buttons.

5. Typography & Readability

• Font Control: Use the global Theme Font or force a specific Custom Font for headings and body text.

• Responsive Sizing: Independent font-size sliders for Desktop and Mobile for the Title, Subtitle, and Buttons.

• Overlay: Add a colored layer (e.g., black) over the video with adjustable Opacity % to ensure text remains readable against busy backgrounds.

6. Spacing & Visibility

• Padding Matrix: Fine-tune the spacing inside the banner (Top/Bottom) and the side margins (Custom or Theme Default).

• Device Hiding: Checkboxes to hide the entire section on Desktop or Mobile if needed.