How to Add and Configure Videos in Components?

Questions:

  • How do I add a video to my slide?
  • How do I make a video autoplay or loop?
  • How do I make a video autoplay or loop?
  • How do I mute a video in the banner?

Tags: Video-Upload, Media-Settings, Autoplay, Video-Poster, how-to-upload, configuration-settings

Description:

This guide explains how to add self-hosted videos to your multi-slide banner to create engaging, dynamic visual content. You can precisely control how the video behaves upon loading, including its positioning and playback rules.

We'll show you, step by step, how to:

  • Upload Footage: Add a self-hosted video file to your slide.
  • Control Playback: Set the video to autoplay, loop, or mute.
  • Set a Poster: Assign a static image to display before the video starts.

Solution:

  1. Select the Video Format - Click the video camera icon at the top of the media settings panel to activate the video configuration mode.
  2. Upload Your Video File

    Click the button to open the media library or select "Change Media File" to upload your self-hosted MP4.

  3. Adjust the Focal Point and Sizing

    Use the nine-square alignment grid to set the exact focal point of your video so the most important part remains visible on all screens. You can also toggle the "Contain video" setting to change how the footage fits within the slide frame.

  4. Configure Playback Rules - Use the provided toggle switches to define how the video behaves when a visitor sees it. You can activate Autoplay, Hide Controls to prevent users from pausing it, activate Loop for continuous playback, and Mute Video to keep it silent.
  5. Assign a Video Poster

    Scroll down to the "Video Poster" section and click the camera icon to open the media library. Upload a static thumbnail image that will display while the video file is loading in the background.

  6. Enter Alternative Text

    Navigate to the bottom of the panel and type a description in the Alternative Text field. This text provides context for screen readers.

Tips and Tricks:

Pro-Tips:

  • Always upload a high-quality Video Poster image so your banner looks professional even on slow internet connections.
  • Set the focal point carefully if your video features a subject off-center, ensuring they do not get cropped out on mobile devices.

Warnings:

  • If you turn on Autoplay, it is highly recommended that you also toggle Mute Video to avoid startling your visitors with sudden audio.
  • Hiding controls on a video that does not autoplay will prevent users from being able to watch the footage.

Subscribe to our newsletter

Stay informed at all times. We will gladly inform you about product news and offers.