> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/video-banner.md).

# Video Banner

The Video Banner module is designed to deliver high-impact visual content across your site — ideal for showcasing branding, promotions, or immersive stories.

***

### 📺 Video Settings

* **Enable Full Width**: Stretch the video across the full width of the screen.
* **Embed Video Link**: Supports YouTube or Vimeo URLs.
* **Upload Local Video**: Upload a short MP4 video manually (recommended length: **10–15 seconds** for optimal performance).
* **Upload Cover Image**: Displayed before the video loads. Recommended size: **1800x800px**, adjustable to video height.
* **Cover Image Opacity**: Controls overlay transparency, useful for balancing text and background.

💡 **Tip**:\
Use a transparent overlay (30–50% opacity) on the cover image for better text readability. Ensure image and video share the same ratio.

***

### 📏 Video Height Options

* **Height Modes**: Auto / Small / Medium / Large
* If cropping is an issue, choose **Auto height** for best visual integrity.

***

### 🎮 Video Controls

* **Enable Playback Controls**: Let users interact via progress bar, mute/unmute, pause/play.
* **Loop Video**: Automatically replay after ending — great for continuous ambient visuals.

***

### 🎨 Content Settings

* **Color Scheme**: Customize or select a theme to define background, text, and button styles.
* **Content Positioning**: Choose from placements like bottom center, top right, etc.
* **Enable Container**: Wrap content in a background container (with optional transparency) to enhance readability.
* **Text Alignment**: Left / Center / Right

💡 **Tip**:\
Use a background container with matching color schemes for legibility over busy videos. Keep messages concise and to the point.

***

### 📱 Mobile Optimization

* **Separate Mobile Video Upload**: Ensure responsiveness and loading performance on mobile devices.
* Mobile layouts can have their own content positions and styling.

***

### 📦 Supported Content Blocks

This module supports the following content blocks:

Badge Group, Button, Button Group, Countdown Timer, Description, Discount Code, Follow Us, Title, Key Metrics, Icon, Icon with Text, Keywords, Link Group, Social Media List, Subtitle, Video Button, Spacer

💡 **Tip**:\
Use high-contrast text colors and avoid covering essential parts of the video.