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

# Videos Bubble

> A batch-aware Angular bubble that renders one or more video attachments of a media message, with adaptive grid layouts, poster thumbnails, duration badges, and a fullscreen player.

The `CometChatVideosBubbleComponent` renders the video attachment(s) of a `CometChat.MediaMessage`. It is the **multi-attachment counterpart** to [`CometChatVideoBubble`](/ui-kit/angular/components/cometchat-video-bubble): 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`).

<Note>
  This bubble is selected only when **[`enableMultipleAttachments`](/ui-kit/angular/components/cometchat-message-composer)** is `true` (the default) on [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble). When it is `false`, video messages fall back to the deprecated single-attachment [`CometChatVideoBubble`](/ui-kit/angular/components/cometchat-video-bubble). The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.
</Note>

## Automatic Rendering

In the standard chat flow you do **not** instantiate this component yourself. [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list) renders [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble), 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

```typescript expandable theme={null}
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

```typescript expandable theme={null}
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](/ui-kit/angular/components/cometchat-video-bubble#styling-with-css-variables); 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.

<Info>
  Angular expresses batch grouping as the two booleans `isFirstInBatch` / `isLastInBatch` (computed by [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list)). There is no `batchPosition` input on the bubble. All four media batch bubbles share one width through the `--cometchat-multi-attachment-width` CSS token.
</Info>

## 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

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

<Note>
  `--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](/ui-kit/angular/components/cometchat-images-bubble), [Videos](/ui-kit/angular/components/cometchat-videos-bubble), [Audios](/ui-kit/angular/components/cometchat-audios-bubble), and [Files](/ui-kit/angular/components/cometchat-files-bubble) — together.
</Note>

To restyle the tiles, posters, or duration badges, use the [Video Bubble styling reference](/ui-kit/angular/components/cometchat-video-bubble#styling-with-css-variables).

## 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.

## Related

* **[Video Bubble](/ui-kit/angular/components/cometchat-video-bubble)** — the single-attachment bubble this component delegates to.
* **[Images Bubble](/ui-kit/angular/components/cometchat-images-bubble)** — the multi-attachment bubble for images.
* **[Files Bubble](/ui-kit/angular/components/cometchat-files-bubble)** — the multi-attachment bubble for files.
* **[Message Composer](/ui-kit/angular/components/cometchat-message-composer)** — stages multiple attachments and sends them as a batch.
* **[Message List](/ui-kit/angular/components/cometchat-message-list)** — routes messages to this bubble and computes batch grouping.