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

# Video Bubble

> Video Bubble — CometChat documentation.

`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 theme={null}
    CometChatVideoBubble(
        theme: cometChatTheme,
        videoUrl:
        'https://data-us.cometchat.io/208434241880dc4d/media/1676278931_975451502_6f3b8b7e82f806de85fe924361e2087d.mp4',
        style: const VideoBubbleStyle(borderRadius: 8),
    )
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.