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

# Video banner

The video banner module is used to display video content on a page, offering multiple customization options to control the video’s display and appearance. This feature is suitable for stores looking to enhance their page with dynamic visual elements.

### Configuration Options

1. **Layout Settings:**
   * **Enable Full Width (`enable_full_width`):**
     * **Purpose**: Selecting this option will display the video banner at full width, covering the entire screen.
     * **Default**: `true`
     * **Note**: Full-width display is ideal for layouts that emphasize video content.
   * **Show Shadow (`show_shadow`):**
     * **Purpose**: Displays a subtle shadow effect around the video banner. This setting is only visible when "Enable Full Width" is disabled.
     * **Default**: `true`
2. **Video Settings:**
   * **Video URL (`video_url`):**
     * **Purpose**: Embed a video from YouTube or Vimeo by pasting its URL.
     * **Default**: `https://www.youtube.com/watch?v=_9VUPq3SxOc` (Example YouTube URL)
     * **Note**: This option is ideal for using externally hosted videos for better performance and reliability.
   * **Video (`video`):**
     * **Purpose**: Click the button to select a video file from your media library. This option is for uploading videos directly to your store.
   * **Enable Video Controls (`enable_controls`):**
     * **Purpose**: Choose this option to display player controls (play/pause buttons, volume control, etc.), allowing users to interact with the video.
     * **Default**: `false`
   * **Enable Video Autoload (`enable_autoload`):**
     * **Purpose**: When selected, the video will automatically buffer and be ready to play as soon as the page loads.
     * **Default**: `false`
     * **Recommendation**: If the video is located in the main above-the-fold area, it’s recommended to disable this option to improve SEO scores and page load performance.
   * **Enable Video Looping (`enable_looping`):**
     * **Purpose**: When enabled, the video will automatically replay after it finishes, suitable for continuously playing content.
     * **Default**: `false`
3. **Cover Image:**
   * **Select Cover Image (`cover_image`):**
     * **Purpose**: Click the button to upload or choose a cover image. This image will display in place of the video before it starts playing.
     * **Note**: A cover image provides visual content before the video loads, keeping the page clean and attractive.
4. **Video Height (`video_height`):**
   * **Purpose**: Controls the height of the video banner.
   * **Options**:
     * **Adapt (`adapt`)**: The video height will automatically adjust based on the content.
     * **Small (`small`)**: Suitable for embedding smaller video content within the page.
     * **Medium (`medium`)**: Standard video height, fitting most use cases.
     * **Large (`large`)**: A larger video height for content that needs emphasis.
   * **Default**: `medium`
5. **Content Settings:**
   * **Color Scheme (`color_scheme`):**
     * **Purpose**: Choose a color scheme for the video banner content to ensure it aligns with the overall page design.
     * **Default**: `background-1`
   * **Content Width (`content_width`):**
     * **Purpose**: Sets the maximum width of the text content within the banner.
     * **Options**:
       * **Narrow (`narrow`)**: Content will occupy a smaller width.
       * **Normal (`normal`)**: Standard content width.
       * **Wide (`wide`)**: Content will occupy a larger width.
     * **Default**: `normal`
   * **Heading (`heading`):**
     * **Purpose**: Set a main heading for the video banner, such as “Product Showcase.” This field supports rich text formatting.
     * **Default**: `Talk about your brand`
   * **Heading Size (`heading_size`):**
     * **Purpose**: Choose the font size for the heading.
     * **Options**: `small`, `medium`, `large`
     * **Default**: `large`
   * **Heading Decorative (`heading_decorative`):**
     * **Purpose**: Select this option to apply a decorative font style to the heading for added visual impact.
     * **Default**: `false`
   * **Enable Italic Gradient (`enable_italic_gradient`):**
     * **Purpose**: When enabled, applies a gradient color to italicized text within the heading.
     * **Default**: `false`
   * **Italic Gradient (`italic_gradient`):**
     * **Purpose**: Choose the gradient colors for italicized text in the heading. This setting is only visible when "Enable Italic Gradient" is selected.
     * **Default**: `linear-gradient(90deg, rgba(40, 184, 242, 1) 1%, rgba(159, 30, 236, 1) 53%, rgba(225, 15, 239, 1) 100%, rgba(255, 255, 255, 0.55) 100%)`
   * **Description (`description`):**
     * **Purpose**: Input a description to provide more background information about the video content. This field supports rich text formatting.
     * **Default**: `<p>Share information about your brand with your customers</p>`
6. **Mobile Settings:**
   * **Video (Mobile) (`video_mobile`):**
     * **Purpose**: Select a separate video file from your media library specifically for mobile devices. This allows for optimized video content on smaller screens.
   * **Mobile Cover Image (`cover_image_mobile`):**
     * **Purpose**: Set a separate cover image for mobile devices to ensure optimal video display on smaller screens.
7. **SEO Optimization:**
   * **Mark as Main Area (`if_as_main_area`):**
     * **Purpose**: Enabling this option will mark the video banner as the main content area of the page, helping to improve SEO scores.
     * **Default**: `false`
8. **Margin Settings:**
   * **Margin Top (`margin_top`):**
     * **Purpose**: Adjust the spacing above the video banner.
     * **Default**: `0px`
     * **Range**: `0 - 100px`
   * **Margin Bottom (`margin_bottom`):**
     * **Purpose**: Adjust the spacing below the video banner.
     * **Default**: `80px`
     * **Range**: `0 - 100px`

### Usage Tips

* **Test Video Loading**: Ensure that the video plays properly and that all settings are effective before publishing the page.
* **Color Coordination**: Choose a color scheme that ensures sufficient contrast between the video background and text to maintain readability.
* **SEO Optimization**: If the video is placed above the fold, it is recommended to disable autoplay (`enable_autoload`) to avoid impacting page load speed, especially when "Mark as Main Area" is enabled.

### Common Issues

* **Video Not Playing or Loading Slowly**: Check the video file size and format, and ensure the appropriate video settings are enabled. Consider using the `video_url` option for externally hosted videos for better performance and reliability.
* **Cover Image Display Issues**: Try adjusting the cover image size or using a different image file to ensure proper display.
* **Text Alignment Problems**: Check the text alignment options in the content settings to ensure the correct alignment has been selected.

By following these settings, your video banner will not only look visually appealing but also perform efficiently across different devices.