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

# Video Plugin

> Renders video messages with inline player, thumbnail grid, and caption support.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `video`                                                                             |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `video`                                                                             |
  | Message Categories   | `message`                                                                           |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatVideoBubble`                                                              |
  | Conversation Preview | Video                                                                               |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Video plugin handles messages of type `video` in category `message`. Single videos render with an inline HTML5 player. Multiple videos display as a thumbnail grid with play overlays.

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

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

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

***

## Bubble Rendering

* **Single video** — inline `<video>` element with native controls, poster thumbnail
* **Multiple videos** — thumbnail grid with play button overlays, click opens fullscreen viewer
* **Caption** — rendered below the video, formatted with text formatters
* **Pending state** — shows a placeholder from the local file blob while uploading
* **Thumbnail** — extracted from SDK attachment metadata or the `thumbnail-generation` extension

***

## Context Menu Options

Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately).

***

## Conversation Preview

Returns: `Video` (localized via `conversation_subtitle_video` key)

***

## CSS Selectors

| Target         | Selector                                |
| -------------- | --------------------------------------- |
| Bubble root    | `.cometchat-video-bubble`               |
| Video element  | `.cometchat-video-bubble__video`        |
| Thumbnail grid | `.cometchat-video-bubble__grid`         |
| Play overlay   | `.cometchat-video-bubble__play-overlay` |
| Caption        | `.cometchat-video-bubble__caption`      |