> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-mechanical-fixes.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 component for [Media message](/sdk/react-native/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 | ImageType                 | the path of the image from assets to display when the actual image is being fetched |
| style            | VideoBubbleStyleInterface | used to customize appearance of this widget                                         |
| playIcon         | Icon                      | icon to display stacked on top of the bubble                                        |
| onPress          | 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            | string               | used to provide colour to the video play icon |
| background              | string               | Sets the background colour                    |
| borderRadius            | number               | Sets the corner radius                        |
| border                  | BorderStyleInterface | Sets the border width for Members             |
| width                   | string \| number     | Sets the width for the Members                |
| height                  | string \| number     | Sets the heigth for the Members               |
| playIconBackgroundColor | string               | used to set play background color             |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatVideoBubble
      videoUrl:
      'https://data-us.cometchat.io/208434241880dc4d/media/1676278931_975451502_6f3b8b7e82f806de85fe924361e2087d.mp4',
      style= {{borderRadius: 8}}
    />
    ```
  </Tab>
</Tabs>