Videos Bubble - CometChat Docs

The CometChatVideosBubbleComponent renders the video attachment(s) of a CometChat.MediaMessage. It is the multi-attachment counterpart to CometChatVideoBubble: the message list routes video messages to this bubble so that a single message carrying several videos renders as one grouped bubble. Internally it delegates rendering to cometchat-video-bubble (grid/overflow layout, poster thumbnails, duration badge, fullscreen player) and only adds a shared batch width so every message in a multi-message batch lines up at the same size.

Overview

Adaptive grid layouts — single video, multi-video grid, 2×2, and a +N overflow tile, selected automatically from the attachment count (rendered by the underlying video bubble).
Poster thumbnails — each tile shows a poster with a play-icon overlay and a duration badge.
Fullscreen player — click any tile to open the video in a fullscreen player.
Batch-aware width — all bubbles in a batch share one width via the --cometchat-multi-attachment-width token (default 400px).

This bubble is selected only when enableMultipleAttachments is true (the default) on CometChatMessageBubble. When it is false, video messages fall back to the deprecated single-attachment CometChatVideoBubble. The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.

Automatic Rendering

In the standard chat flow you do not instantiate this component yourself. CometChatMessageList renders CometChatMessageBubble, which routes any video-type message to CometChatVideosBubbleComponent when enableMultipleAttachments is on. Use the component directly only when you are building a fully custom message renderer.

Basic Usage

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatVideosBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-video-message',
  standalone: true,
  imports: [CometChatVideosBubbleComponent],
  template: `
    <cometchat-videos-bubble
      [message]="videoMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-videos-bubble>
  `,
})
export class VideoMessageComponent {
  videoMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Incoming vs Outgoing Messages

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatVideosBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-video-list',
  standalone: true,
  imports: [CometChatVideosBubbleComponent],
  template: `
    <!-- Incoming videos (left-aligned) -->
    <cometchat-videos-bubble
      [message]="incoming"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-videos-bubble>

    <!-- Outgoing videos (right-aligned) -->
    <cometchat-videos-bubble
      [message]="outgoing"
      [alignment]="MessageBubbleAlignment.right"
    ></cometchat-videos-bubble>
  `,
})
export class VideoListComponent {
  incoming!: CometChat.MediaMessage;
  outgoing!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Grid Layouts

The underlying video bubble selects a layout from the number of video attachments:

Attachments	Layout
1	Full-width single video with poster
2–4	Adaptive grid (side-by-side / 2×2)
5+	2×2 grid with the last tile showing a `+N` overflow overlay

Each tile shows a poster thumbnail, a play-icon overlay, and a duration badge. Those classes (.cometchat-video-bubble__play-overlay, .cometchat-video-bubble__duration-badge, and so on) belong to the underlying video bubble — see its styling reference; this bubble adds no selectors of its own.

Batch Grouping

When a user sends several media messages together, each message is stamped with a shared metadata.batchId. The message list groups consecutive messages that share a batchId and marks each one with isFirstInBatch / isLastInBatch flags, which control the avatar, spacing, and footer so the batch reads as a single visual block.

Angular expresses batch grouping as the two booleans isFirstInBatch / isLastInBatch (computed by CometChatMessageList). There is no batchPosition input on the bubble. All four media batch bubbles share one width through the --cometchat-multi-attachment-width CSS token.

Properties

Property	Type	Default	Description
`message`	`CometChat.MediaMessage`	required	The video message. Attachments and caption are read from it.
`alignment`	`MessageBubbleAlignment`	`MessageBubbleAlignment.left`	Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender.
`disableInteraction`	`boolean`	`false`	When `true`, disables click-to-play / fullscreen interaction on the videos.

This component emits no outputs.

Relationship to the Legacy Video Bubble

	`CometChatVideoBubble` (legacy)	`CometChatVideosBubble` (multi-attachment)
Routed by the list	Only when `enableMultipleAttachments` is `false`	Default for video messages
Multiple attachments	Rendered directly	Rendered via delegation, batch-aware width
Batch grouping	No	Yes (`isFirstInBatch` / `isLastInBatch`)
Availability	Deprecated standalone	Public standalone component

Customization

cometchat-videos-bubble {
  /* Shared width for every media bubble in a batch (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}

--cometchat-multi-attachment-width is intentionally left unset in the kit’s css-variables.css; the batch bubbles fall back to 400px. Set it once to resize all four media batch bubbles — Images, Videos, Audios, and Files — together.

To restyle the tiles, posters, or duration badges, use the Video Bubble styling reference.

Technical Details

Standalone component — import and use independently; exported as CometChatVideosBubbleComponent from @cometchat/chat-uikit-angular.
Change detection — OnPush.
Delegation — renders through cometchat-video-bubble; adds only the shared batch width (and relaxes the inner height caps so a 16:9 video fills the batch width).
No outputs — the component emits no events.

Video Bubble — the single-attachment bubble this component delegates to.
Images Bubble — the multi-attachment bubble for images.
Files Bubble — the multi-attachment bubble for files.
Message Composer — stages multiple attachments and sends them as a batch.
Message List — routes messages to this bubble and computes batch grouping.

​Overview

​Automatic Rendering

​Basic Usage

​Incoming vs Outgoing Messages

​Grid Layouts

​Batch Grouping

​Properties

​Relationship to the Legacy Video Bubble

​Customization

​Technical Details

​Related

Overview

Automatic Rendering

Basic Usage

Incoming vs Outgoing Messages

Grid Layouts

Batch Grouping

Properties

Relationship to the Legacy Video Bubble

Customization

Technical Details

Related