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

# Video Bubble

> Video Bubble — CometChat documentation.

This element handles the display and the play/pause functionality for an individual video. This element uses the native embed video element.

## Properties

| Name       | Type                                                            | Description                                                                                                                                             |
| ---------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src        | string                                                          | URL of the video file                                                                                                                                   |
| autoPlay   | boolean                                                         | When set to true, the video will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. |
| loop       | boolean                                                         | When set to true, the video player will automatically seek back to the start upon reaching the end of the audio.                                        |
| muted      | boolean                                                         | when set to true, the audio will be initially silenced.                                                                                                 |
| poster     | string                                                          | A URL for an image to be shown while the video is downloading                                                                                           |
| videoStyle | [VideoBubbleStyle](/web-elements/video-bubble#videobubblestyle) | Styling properties and values of the element                                                                                                            |

## VideoBubbleStyle

Styling properties and values of the element

| Name         | Description                                                                                                                                                                          |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width        | Sets the width of the element                                                                                                                                                        |
| height       | Sets the height of the element                                                                                                                                                       |
| border       | Sets the border of the element                                                                                                                                                       |
| borderRadius | Sets the border radius of the element                                                                                                                                                |
| background   | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const videoURL = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";

    //use the element
    <cometchat-video-bubble src={videoURL}></cometchat-video-bubble>
    ```
  </Tab>
</Tabs>