> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Video Bubble

> A batch-aware bubble that renders one or more video attachments with adaptive grid layouts, poster thumbnails, and a fullscreen viewer.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                |
  | -------------- | -------------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatVideosBubble`                                                                                              |
  | Package        | `@cometchat/chat-uikit-react`                                                                                        |
  | Import         | `import { CometChatVideosBubble } from "@cometchat/chat-uikit-react";`                                               |
  | CSS root class | `.cometchat-videos-bubble`                                                                                           |
  | Primary output | `onVideoClicked: (attachment: CometChatVideosBubbleAttachment, index: number) => void` — opens the fullscreen viewer |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user     |
  | Stitching      | None — self-extracting from the SDK message                                                                          |
  | Full props     | See [Props](#props)                                                                                                  |
</Accordion>

## Overview

`CometChatVideosBubble` renders the video attachment(s) of a media message with batch-aware styling. It is **self-extracting**: pass the SDK `message` and the bubble derives its attachments, caption, and alignment itself. The message list uses it automatically for video messages.

Key capabilities:

* **Adaptive grid layouts** — single video, 2-column, 2×2 grid, and overflow (+N) based on attachment count
* **Poster thumbnails** — auto-generated from the `thumbnail-generation` extension or first frame
* **Duration overlay** — displays video duration on each tile
* **Play icon overlay** — visual indicator on each video tile
* **Fullscreen viewer** — click any video to open in fullscreen player
* **Batch grouping** — rendered as one connected group when several media messages are sent together (handled by the [message list](/ui-kit/react/components/message-list#multi-attachment-batch-grouping))

<Note>
  Auto poster thumbnails are produced by the **Thumbnail Generation** extension — enable it in the Dashboard ([Thumbnail Generation](/fundamentals/thumbnail-generation)). Without it, the bubble falls back to the first video frame.
</Note>

<Info>
  **Live Preview** — interact with the video bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-videos--grid-2-videos)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-videos--grid-2-videos&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "600px", border: "1px solid #e0e0e0"}} title="CometChat Video Bubble — 2 Videos Grid" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatVideosBubble } from "@cometchat/chat-uikit-react";

function VideoMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatVideosBubble message={message} />;
}
```

***

## Grid Layouts

The bubble automatically selects a layout based on the number of video attachments:

| Attachment Count | Layout         | Description                                  |
| ---------------- | -------------- | -------------------------------------------- |
| 1                | `single`       | Full-width single video with poster          |
| 2                | `grid` (2-col) | Side-by-side video tiles                     |
| 3                | `grid` (three) | 2-col grid with one spanning                 |
| 4                | `grid-2x2`     | 2×2 even grid                                |
| 5+               | `overflow`     | 2×2 grid with last tile showing "+N" overlay |

Each tile shows a poster thumbnail, play icon, and duration badge.

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-videos--grid-with-caption&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat Video Bubble — Grid With Caption" allow="clipboard-write" />

***

## Props

### message

The video message. The bubble extracts its attachments and caption from it. **Required.**

|          |                          |
| -------- | ------------------------ |
| Type     | `CometChat.MediaMessage` |
| Required | Yes                      |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

|         |                     |
| ------- | ------------------- |
| Type    | `"left" \| "right"` |
| Default | derived             |

***

### textFormatters

Text formatters applied to the caption (mentions, URLs).

|         |                            |
| ------- | -------------------------- |
| Type    | `CometChatTextFormatter[]` |
| Default | `undefined`                |

***

### onVideoClicked

Callback fired when a video tile is clicked.

|         |                                                                        |
| ------- | ---------------------------------------------------------------------- |
| Type    | `(attachment: CometChatVideosBubbleAttachment, index: number) => void` |
| Default | `undefined`                                                            |

***

### className

Additional CSS class applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target             | Selector                                     |
| ------------------ | -------------------------------------------- |
| Root               | `.cometchat-videos-bubble`                   |
| Incoming variant   | `.cometchat-videos-bubble--incoming`         |
| Outgoing variant   | `.cometchat-videos-bubble--outgoing`         |
| Single layout      | `.cometchat-videos-bubble--single`           |
| Grid container     | `.cometchat-videos-bubble__grid`             |
| 2-column grid      | `.cometchat-videos-bubble__grid--two-col`    |
| 3-video grid       | `.cometchat-videos-bubble__grid--three`      |
| 2×2 grid           | `.cometchat-videos-bubble__grid--2x2`        |
| Overflow grid      | `.cometchat-videos-bubble__grid--overflow`   |
| Video tile         | `.cometchat-videos-bubble__tile`             |
| Poster thumbnail   | `.cometchat-videos-bubble__thumbnail`        |
| Play icon          | `.cometchat-videos-bubble__play-icon`        |
| Duration badge     | `.cometchat-videos-bubble__duration`         |
| Placeholder        | `.cometchat-videos-bubble__placeholder`      |
| Overflow tile      | `.cometchat-videos-bubble__overflow-tile`    |
| Overflow overlay   | `.cometchat-videos-bubble__overflow-overlay` |
| Overflow text (+N) | `.cometchat-videos-bubble__overflow-text`    |
| Container          | `.cometchat-videos-bubble__container`        |
| Caption            | `.cometchat-videos-bubble__caption`          |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Image Bubble" icon="image" href="/ui-kit/react/components/image-bubble">
    Batch-aware image bubble with grid layouts
  </Card>

  <Card title="Audio Bubble" icon="music" href="/ui-kit/react/components/audio-bubble">
    Batch-aware audio bubble with player cards
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
    Multi-attachment batch grouping in the list
  </Card>

  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/components/message-composer">
    Multi-attachment staging tray
  </Card>
</CardGroup>