> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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>


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