> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hosted video player

> Upload and embed videos using HoopAI's built-in video hosting in funnels and websites — with playback tracking and lead gating.

HoopAI includes a built-in video hosting and player system so you can upload videos directly to the platform, embed them in funnel steps and website pages, and track viewer engagement — without relying on YouTube, Vimeo, or third-party hosting.

## Uploading videos

<Steps>
  <Step title="Open Media Library">
    Navigate to **Media Library** in the left sidebar. Click **Upload** and select your video file. Supported formats include MP4, MOV, and WebM.
  </Step>

  <Step title="Wait for processing">
    The platform processes and optimizes the video for streaming. Processing time depends on file size and length.
  </Step>

  <Step title="Copy the video URL">
    Once processing is complete, click the video to copy its hosted URL. You can also embed it directly from the builder.
  </Step>
</Steps>

## Adding a hosted video to a page

<Steps>
  <Step title="Open the page in the builder">
    Navigate to your funnel step or website page and click **Edit Page**.
  </Step>

  <Step title="Add a video element">
    In the left panel, click **Add Elements** and drag the **Video** element onto the canvas.
  </Step>

  <Step title="Select the video source">
    Click the video element to open settings. Choose **Hosted** as the source and select your uploaded video from the media library, or paste the hosted video URL.
  </Step>

  <Step title="Configure playback options">
    Set options including:

    * **Autoplay** — start playing when the page loads (muted by default per browser policies)
    * **Loop** — restart the video when it ends
    * **Controls** — show or hide the player controls
    * **Thumbnail** — upload a custom poster image displayed before playback starts
  </Step>
</Steps>

## Video player customization

The hosted video player supports several visual and behavioral settings:

| Setting               | Description                                                       |
| --------------------- | ----------------------------------------------------------------- |
| **Player color**      | Customize the progress bar and control colors to match your brand |
| **Play button style** | Choose between centered overlay or bottom-left standard           |
| **Playback speed**    | Allow viewers to adjust speed (0.5x to 2x)                        |
| **Thumbnail image**   | Custom image shown before the viewer clicks play                  |
| **Responsive sizing** | Automatically scales to fit the container width                   |

## Tracking viewer progress

Hosted videos track engagement automatically. View analytics in the funnel or page analytics dashboard:

* **Play rate** — percentage of page visitors who clicked play
* **Average watch time** — how long viewers watched on average
* **Completion rate** — percentage of viewers who watched to the end
* **Drop-off points** — where viewers stopped watching

<Tip>
  If your completion rate is below 50%, consider shortening the video or adding chapter markers to let viewers skip to the sections most relevant to them.
</Tip>

## Lead gating with video

Gate your video behind a form to capture leads before they can watch:

1. Add a **Form** element overlaying the video section.
2. Configure the form to collect name and email.
3. Set the form's **On Submit** action to reveal the video section (using show/hide element logic).
4. The viewer submits their details and the video becomes visible.

This approach is effective for webinar replays, exclusive training content, and premium video resources.

## Video backgrounds

Use a hosted video as a section background for visual impact:

1. Select the section in the builder.
2. In section settings, choose **Video** as the background type.
3. Select the hosted video from your media library.
4. The video plays silently on loop behind your section content.

<Note>
  Video backgrounds are muted and looped by default. They add visual interest but should not contain essential content — use them for ambient footage, product demos, or brand videos.
</Note>

## Performance considerations

* Compress videos before uploading to reduce load times. Aim for under 100 MB for most funnel videos.
* Use a thumbnail image so visitors see content immediately while the video loads.
* Enable lazy loading in funnel settings if you have multiple videos on a single page.
* Hosted videos are served through a CDN for fast global delivery.