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

# Video

Videos are elements that play video files and incorporate playback controls, playhead, and time

<Frame>
  <img src="https://mintcdn.com/standards/lTks_dypahmYIJvI/images/video-element-01.gif?s=33a6610b9b3073b3447fc904804c7134" alt="Various looping videos with motion design examples" width="1200" height="600" data-path="images/video-element-01.gif" />
</Frame>

***

## Basics

Video elements play .mp4 and .webm files, and include built-in controls with a play button, timestamp, and playhead, as well as playback settings like loop video available in the in-body tool widget.

### Adding videos

<Steps>
  <Step title="Select the video add tool">
    From within the editor, select **Video** from the `+`menu in the top bar
  </Step>

  <Step title="Select area to add to">
    Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column
  </Step>

  <Step title="Choose video file">
    Select or upload a video file the player will use for playback
  </Step>
</Steps>

### Elements inside video

**Controls**

* **Play button:** Shows play & pause state, can be used to play & pause on click
* **Time:** Displays in text the total video length, and progress
* **Playhead:** Displays in a bar the total video length, and progress

***

## Examples

<Frame>
  <img src="https://mintcdn.com/standards/lTks_dypahmYIJvI/images/video-element-02.gif?s=5808700511c3073f51da1d817e4231a9" alt="Video with play button, progress bar, and time" width="1200" height="600" data-path="images/video-element-02.gif" />
</Frame>

Full controls in use, great for longer form video.

<Frame>
  <img src="https://mintcdn.com/standards/lTks_dypahmYIJvI/images/video-element-03-1.gif?s=9026d5bcb241015e87633954560fb1e1" alt="Looping video with just a pause button" width="1200" height="600" data-path="images/video-element-03-1.gif" />
</Frame>

Simplified controls, just showing play & pause button, set to autoplay. Great for short looping videos.

***

## Playback settings

<Frame>
  <img src="https://mintcdn.com/standards/YT2_HtiSYZQrAkjK/images/video-04.png?fit=max&auto=format&n=YT2_HtiSYZQrAkjK&q=85&s=b022b61045fdd4d739de994b37c297a5" alt="Contextual toolbar showing active settings: Autoplay and Loop" width="2400" height="1200" data-path="images/video-04.png" />
</Frame>

### Change playback settings

<Steps>
  <Step title="Select video">
    Within the body of the editor or from the contents list in the left sidebar, select the video element
  </Step>

  <Step title="Choose settings">
    Select the gear icon, then choose preferences like autoplay and loop video
  </Step>

  <Step title="Note: Click / hover playback">
    To control playback with click and hover, select the play button from within controls, then choose the click and hover behaviors from the contextual toolbar
  </Step>
</Steps>