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

# Video Bubble

`CometChatVideoBubble` is the content view for a [MediaMessage](/sdk/flutter/send-message#media-message) if the media sent is a video.

## Properties

| Properties                      | Type                                                                 | Description                                                                         |
| ------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| **videoUrl**                    | String                                                               | the path of the video to play                                                       |
| **thumbnailUrl**                | String                                                               | used to set a custom thumbnail for the video                                        |
| **placeholderImage**            | String                                                               | the path of the image from assets to display when the actual image is being fetched |
| **placeHolderImagePackageName** | String                                                               | the package of the asset image to display when the actual image is being fetched    |
| **style**                       | [VideoBubbleStyle](/ui-kit/flutter/v4/video-bubble#videobubblestyle) | used to customize appearance of this widget                                         |
| **theme**                       | [CometChatTheme](/ui-kit/flutter/v4/theme)                           | used to set custom theme                                                            |
| **playIcon**                    | Icon                                                                 | icon to display stacked on top of the bubble                                        |
| **onClick**                     | Function()                                                           | custom action on tapping the video bubble play icon                                 |

***

## VideoBubbleStyle

VideoBubbleStyle is the class containing attributes to customize appearance of this widget.

| Properties       | Type      | Description                                  |
| ---------------- | --------- | -------------------------------------------- |
| **playIconTint** | Color     | used to provide color to the video play icon |
| **height**       | double    | used to set height                           |
| **width**        | double    | used to set width                            |
| **background**   | Color     | used to set background color                 |
| **gradient**     | Gradient  | used to set a gradient background            |
| **border**       | BoxBorder | used to set border                           |
| **borderRadius** | double    | used to set border radius                    |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatVideoBubble(
        theme: cometChatTheme,
        videoUrl:
        'https://data-us.cometchat.io/208434241880dc4d/media/1676278931_975451502_6f3b8b7e82f806de85fe924361e2087d.mp4',
        style: const VideoBubbleStyle(borderRadius: 8),
    )
    ```
  </Tab>
</Tabs>