Table of Contents
Video Hero Widget Documentation #
The Video Hero widget for PistonUI is a high-performance Elementor component designed to create cinematic, engaging landing page headers with full-screen video backgrounds and interactive overlays.
1. Content Settings #
The Content Tab allows you to configure the primary media and text elements of your Hero section.
- Video Source: Choose your video origin from three options: Self-Hosted (Upload), YouTube, or Vimeo.
- Playback Options: * Loop Video: Automatically restarts the video once it reaches the end.
- Autoplay (Muted): Sets the video to play immediately upon page load (muted for browser compatibility).
- Show Player Controls: Toggle a playback interface in the bottom-right corner.
- Text & AI Integration: * Includes fields for Subtitle, Title, and Description.
- Each text field features a “Write with AI” integration to help generate compelling copy instantly.
- Call to Action (CTA): * Define Button Text (e.g., “Buy Now”) and a destination Button URL.
- Custom Icons: Upload unique SVG icons for the Play, Pause, and Sound On interface elements.
2. Styling & Customization #
The Style Tab provides granular control over the visual presentation of every element.
Controls Styling #
Manage the appearance of interactive media buttons:
- Button Backgrounds: Set colors for both the Play and Sound buttons in their normal and Hover states.
- Icon Colors: Customize the specific color of the icons within the buttons for both standard and hover interactions.
Hero Layout & Typography #
- Section Height: Use the responsive slider to set the precise height of the hero in pixels (px).
- Typography & Colors: Independent controls for font family, size, and weight for the Title, Subtitle, and Description.
- Overlay Color: Apply a color tint over the video background to increase contrast and ensure text readability.
Button Styling #
- Full control over the CTA button’s Typography, Text Color, and Background color/gradient.
3. Optimization Tips #
- Speed Up Your Site: For maximum performance, use compressed self-hosted MP4 files or lightweight YouTube links.
- Visibility: Disabled widgets, including the Video Hero, will not appear in the Elementor editor, helping to keep your workspace clean.
