---
title: Video Hero
description: "## 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…"
url: "https://pistonui.com/docs/video-hero/"
updated: "2026-01-31"
category: Widgets
---

# Video Hero

## 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.