Video Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatVideoBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatVideoBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting video bubble. Extracts video attachments, thumbnails, and caption from a MediaMessage.",
  "cssRootClass": ".cometchat-video-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of video attachments, thumbnails, and caption." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "textFormatters": { "type": "CometChatTextFormatter[]" },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatVideoBubble renders the video attachment(s) of a media message. It is self-extracting: pass the SDK message and the bubble derives the video URLs, thumbnails, caption, and alignment itself, so it works standalone. A single video shows its thumbnail as a poster with a play overlay; multiple videos lay out in a grid with an overflow tile.

Live Preview — interact with the video bubble.Open in Storybook ↗

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatVideoBubble } from "@cometchat/chat-uikit-react";

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

Props

message

The media message. Drives extraction of video attachments, thumbnails, caption, and sender name. 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 for caption rendering (mentions, URLs).


Type	`CometChatTextFormatter[]`
Default	`undefined`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-video-bubble`
Incoming / outgoing	`.cometchat-video-bubble--incoming` / `.cometchat-video-bubble--outgoing`
Single video	`.cometchat-video-bubble--single`
Container	`.cometchat-video-bubble__container`
Grid	`.cometchat-video-bubble__grid`
Play overlay	`.cometchat-video-bubble__play-overlay`
Duration badge	`.cometchat-video-bubble__duration-badge`
Caption	`.cometchat-video-bubble__caption`

Next Steps

Video Plugin

Plugin behavior, context menu, and conversation preview

Image Bubble

Render image attachments

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​message

​alignment

​textFormatters

​className

​CSS Selectors

​Next Steps

Video Plugin

Image Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

textFormatters

className

CSS Selectors

Next Steps