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

# Images & Embeds

> Add images, videos, and iframes to create rich, enterprise-grade documentation.

# Images and embeds

> Add images, videos, and iframes

Add images, embed videos, and include interactive content with iframes to your documentation.

<Frame>
  <img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Photograph of a scenic landscape with purple flowers in the foreground, mountains in the background, and a blue sky with scattered clouds." />
</Frame>

## Images

Add images to provide visual context, examples, or decoration to your documentation.

### Basic image syntax

Use [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images) to add images to your documentation:

```mdx
![Alt text describing the image](/path/to/image.png)
```

<Tip>
  Always include descriptive alt text to improve accessibility and SEO. The alt text should clearly describe what the
  image shows.
</Tip>

Image files must be less than 20 MB. For larger files, host them on a CDN service like [Amazon S3](https://aws.amazon.com/s3) or [Cloudinary](https://cloudinary.com).

### HTML image embeds

For more control over image display, use HTML `<img>` tags:

```html
<img src="/images/dashboard.png" alt="Main dashboard interface" height="300" className="rounded-lg" />
```

#### Disable zoom functionality

To disable the default zoom on click for images, add the `noZoom` property:

```html highlight="4"
<img src="/images/screenshot.png" alt="Descriptive alt text" noZoom height="200" />
```

#### Link images

To make an image a clickable link, wrap the image in an anchor tag and add the `noZoom` property:

```html
<a href="https://chromaflow.ai" target="_blank">
  <img src="/images/logo_bigger_no_subtext.png" alt="ChromaFlow logo" noZoom height="100" />
</a>
```

<Note>Images within anchor tags automatically display a pointer cursor to indicate they are clickable.</Note>

#### Light and dark mode images

To display different images for light and dark themes, use Tailwind CSS classes:

```html
<!-- Light mode image -->
<img className="block dark:hidden" src="/images/chromaflow-logo.jpg" alt="Light mode interface" />

<!-- Dark mode image -->
<img className="hidden dark:block" src="/images/Logo_Bigger_Clean_White.png" alt="Dark mode interface" />
```

## Videos

Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html), giving you flexibility to create rich content.

<Tip>Always include fallback text content within video elements for browsers that don't support video playback.</Tip>

### YouTube embeds

Embed YouTube videos using iframe elements:

```html
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
```

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/4KzFe50RQkQ" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

### Self-hosted videos

Use the HTML `<video>` element for self-hosted video content:

```html
<video controls className="w-full aspect-video rounded-xl" src="/videos/demo.mp4"></video>
```

### Autoplay videos

To autoplay a video, use:

```html
<video autoplay muted loop playsinline className="w-full aspect-video rounded-xl" src="/videos/demo.mp4"></video>
```

<Note>
  When using JSX syntax, write double-word attributes in camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
</Note>

## iframes

Embed external content using iframe elements:

```html
<iframe src="https://example.com/embed" title="Embedded content" className="w-full h-96 rounded-xl"></iframe>
```

## ChromaFlow enterprise examples

Use official assets from `public/images` to illustrate enterprise workflows and integrations.

### Connector logos grid

```mdx
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 items-center">
  <img src="/images/connectors/github.svg" alt="GitHub" noZoom height="40" />
  <img src="/images/connectors/supabase.svg" alt="Supabase" noZoom height="40" />
  <img src="/images/connectors/stripe.svg" alt="Stripe" noZoom height="40" />
  <img src="/images/connectors/openai.svg" alt="OpenAI" noZoom height="40" />
  <img src="/images/connectors/perplexity.svg" alt="Perplexity" noZoom height="40" />
  <img src="/images/connectors/vercel.svg" alt="Vercel" noZoom height="40" />
</div>
```

### Architecture hero

<Frame>
  <img className="rounded-xl" src="https://mintlify.s3.us-west-1.amazonaws.com/octave-x/images/ChromaFlowBraid.png" alt="ChromaFlow braided architecture visualization" />
</Frame>

### Cloudflare deployment

<Frame>
  <img className="rounded-xl" src="https://mintlify.s3.us-west-1.amazonaws.com/octave-x/images/cloudflare.png" alt="Cloudflare global network" />
</Frame>

## Related resources

<Card title="Frame component reference" icon="frame" horizontal href="/components/frames">
  Learn how to use the Frame component for presenting images.
</Card>