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

# Video element

> Learn how to add a video on top of your canvas as an independent, movable element

Video elements let you layer a video directly on your canvas, on top of your existing clip. Unlike a background video or a separate clip, a video element sits as an overlay you can freely position, resize, and animate.

<Steps>
  <Step title="Upload the video">
    Open the media panel from the left panel and click Upload, in either the In this project or Workspace tab.

    <Frame>
      <img src="https://mintcdn.com/clueso/jfc9Bak9uC4gwns8/images/Screenshot-2026-06-30-at-5.34.28-PM-1.png?fit=max&auto=format&n=jfc9Bak9uC4gwns8&q=85&s=eeedafd8d6ef2e8645d65e4c0c2e8791" alt="Screenshot 2026 06 30 At 5 34 28 PM 1" style={{ width:"65%" }} width="1328" height="1742" data-path="images/Screenshot-2026-06-30-at-5.34.28-PM-1.png" />
    </Frame>
  </Step>

  <Step title="Add it as an element">
    To add it to your canvas, click the video and choose **Video as element** from the three options. It lands on your canvas as an overlay.\\

    <Frame>
      <img src="https://mintcdn.com/clueso/jfc9Bak9uC4gwns8/images/Screenshot-2026-06-30-at-5.46.54-PM.png?fit=max&auto=format&n=jfc9Bak9uC4gwns8&q=85&s=e929e58d067b3c8882cdb86316ab919f" alt="Screenshot 2026 06 30 At 5 46 54 PM" width="2114" height="1572" data-path="images/Screenshot-2026-06-30-at-5.46.54-PM.png" />
    </Frame>
  </Step>

  <Step title="Position and resize">
    Drag the video element to where you want it on the canvas and use the corner handles to resize it.

    <Frame>
      <img src="https://mintcdn.com/clueso/-9tTrVdzj5w7hccc/images/screen-recording.gif?s=765ac11bd6b8da5b746d60fad2eb7cbc" alt="Screen Recording" width="900" height="646" data-path="images/screen-recording.gif" />
    </Frame>
  </Step>

  <Step title="Style it from the right panel">
    Select the element to open the right panel. It has three tabs: Properties for border, radius, and opacity, Audio for volume and Animation for entry and exit effects.

    <Frame>
      <img src="https://mintcdn.com/clueso/jfc9Bak9uC4gwns8/images/Screenshot-2026-06-30-at-5.54.27-PM.png?fit=max&auto=format&n=jfc9Bak9uC4gwns8&q=85&s=b3de255db752ac4e4a129d8632063208" alt="Screenshot 2026 06 30 At 5 54 27 PM" title="Screenshot 2026 06 30 At 5 54 27 PM" style={{ width:"58%" }} width="1284" height="1726" data-path="images/Screenshot-2026-06-30-at-5.54.27-PM.png" />
    </Frame>
  </Step>
</Steps>

<Tip>
  The video element carries its own audio. For a visual-only overlay, mute it from the timeline.
</Tip>