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

# #video — Video Files

> Embed video content in your app

The `#video` command bundles video files into your app for in-app playback. Use it for onboarding videos, tutorials, background loops, or any video content that should ship with your app.

## What It Does

When you use `#video`, the AI:

1. Adds the video file to your Xcode project as a bundled resource
2. Sets up a video player using AVKit and AVFoundation
3. Configures playback behavior (autoplay, looping, controls) based on your description

## Supported Formats

| Format        | Notes                                                         |
| ------------- | ------------------------------------------------------------- |
| **MOV**       | Apple's QuickTime format, widely supported on Apple platforms |
| **MP4**       | Universal format, great compatibility and compression         |
| **QuickTime** | QuickTime-compatible video files                              |

## How to Use

<Steps>
  <Step title="Type #video in the chat">
    Type `#` and select **video** from the toolkit popover.
  </Step>

  <Step title="Select your video file">
    The file picker opens, filtered to supported video formats. Choose the video you want to embed.
  </Step>

  <Step title="Describe how to use it">
    The video appears as an orange chip below the input. Tell the AI where to place the video and how it should behave.
  </Step>

  <Step title="Send your message">
    Press Enter. The AI bundles the video and creates the player view as described.
  </Step>
</Steps>

## Example Prompts

```
Play this video as the onboarding background
```

```
Show this tutorial video on the help screen
```

```
Loop this video behind the login screen
```

```
Add a video player for this clip on the product detail page with playback controls
```

```
Play this video fullscreen when the user taps the 'Watch Demo' button
```

## Common Video Patterns

<AccordionGroup>
  <Accordion title="Background video loops">
    Great for login screens and landing pages. Tell the AI to loop the video, mute it, and place it behind your content. Keep these videos short (5-15 seconds) and visually subtle.
  </Accordion>

  <Accordion title="Tutorial and onboarding videos">
    Walk new users through your app with a video on each onboarding step. These typically include playback controls and play once.
  </Accordion>

  <Accordion title="Product or content previews">
    Embed preview clips that users can watch inline. These usually have play/pause controls and expand to fullscreen on tap.
  </Accordion>
</AccordionGroup>

<Warning>
  Video files can be large. Keep videos under 50MB to avoid slow builds and large app sizes. For longer videos or content that updates frequently, consider streaming from a URL instead of bundling in the app.
</Warning>

## Tips for Smaller File Sizes

| Approach                | How it helps                                         |
| ----------------------- | ---------------------------------------------------- |
| Use MP4 with H.264      | Best compression-to-quality ratio for most use cases |
| Shorten the clip        | Trim to only the essential footage                   |
| Reduce resolution       | 720p is often sufficient for mobile playback         |
| Lower the frame rate    | 24fps or 30fps is fine for most app videos           |
| Compress with HandBrake | Free tool that can significantly reduce file size    |

<Note>
  If your video is purely decorative (like a background loop), consider using a Lottie animation instead. Lottie files are dramatically smaller and resolution-independent.
</Note>

## Related

<CardGroup cols={2}>
  <Card title="Toolkit Overview" icon="grid-2" href="/toolkit/overview">
    See all available # commands and how the toolkit works.
  </Card>

  <Card title="#sound — Audio Files" icon="volume-high" href="/toolkit/sound">
    Add sound effects and audio to your app.
  </Card>
</CardGroup>