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. Enable Full Width:

   • Purpose: Selecting this option will display the video banner at full width, covering the entire screen.

   • Note: Full-width display is ideal for layouts that emphasize video content.

2. Video Settings:

   • Video:

     • Select Video: Click the button to select a video file from your media library.

   • Enable Video Controls:

     • Purpose: Choose this option to display player controls (play/pause buttons, volume control, etc.), allowing users to interact with the video.

   • Enable Video Autoload:

     • Purpose: When selected, the video will automatically buffer and be ready to play as soon as the page loads.

     • Recommendation: If the video is located in the main above-the-fold area, it’s recommended to disable this option to improve SEO scores.

   • Enable Video Looping:

     • Purpose: When enabled, the video will automatically replay after it finishes, suitable for continuously playing content.

3. Cover Image:

   • Select Cover Image: Click the button to upload or choose a cover image. This image will display in place of the video before it starts playing.

   • Purpose: A cover image provides visual content before the video loads, keeping the page clean and attractive.

4. Video Height:

   • Auto: The video height will automatically adjust based on the content.

   • Small: Suitable for embedding smaller video content within the page.

   • Medium: Standard video height, fitting most use cases.

   • Large: A larger video height for content that needs emphasis.

5. Content Settings:

   • Color Scheme: Choose a color scheme for the video banner content to ensure it aligns with the overall page design.

   • Title: Set a main title for the video banner, such as “Product Showcase.”

   • Title Size: Choose the font size for the title (small, medium, large).

   • Title Uppercase: Select this option to display the title in all uppercase letters for added visual impact.

   • Description: Input a description to provide more background information about the video content.

6. Mobile Settings:

   • Mobile Cover Image: Set a separate cover image for mobile devices to ensure optimal video display on smaller screens.

7. SEO Optimization:

   • Primary Above-the-Fold Area:

     • Purpose: Enabling this option will mark the video banner as the main content area of the page, helping to improve SEO scores.

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 to avoid impacting page load speed.

Common Issues

• Video Not Playing or Loading Slowly: Check the video file size and format, and ensure the appropriate video settings are enabled.

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