> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Prebuilt Video Player Setup

> Use this guide if you want to set up a prebuilt video player from our SDK with collaborative features built in.

<img src="https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/video-comment.gif?s=7c708d91d25392b662e1eb1d942925e4" alt="" width="1280" height="720" data-path="gifs/video-comment.gif" />

<Tabs>
  <Tab title="React / Next.js">
    <Steps>
      <Step title="Import VeltVideoPlayer component">
        Import the `VeltVideoPlayer` component.

        ```jsx theme={null}
        import { VeltVideoPlayer} from '@veltdev/react'
        ```
      </Step>

      <Step title="Add src to VeltVideoPlayer">
        Add your video src URL to the `src` attribute of the `VeltVideoPlayer` component.

        There are a few other properties:

        * `darkMode` - boolean to enable dark mode
        * `sync` - boolean to enable sync mode

        ```jsx theme={null}
        <VeltVideoPlayer 
          src={"https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Fvelt.mp4?alt=media&token=d8af2697-c797-4610-b886-ca510b231097"} 
          darkMode={false}
          sync={true}
        />
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    Add your video src URL to the `src` attribute of the `<velt-video-player>` component.

    There are a few other properties:

    * `dark-mode` - boolean to enable dark mode
    * `sync` - boolean to enable sync mode

    ```html theme={null}
    <!-- dark-mode="false" - to disable dark mode -->
    <!-- sync="true" - to enable sync mode -->
    <velt-video-player 
      src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
      dark-mode="false"
      sync="true"
    >
    </velt-video-player>

    ```
  </Tab>
</Tabs>

<RequestExample>
  ```jsx React / Next.js theme={null}
  import {
    VeltVideoPlayer
  } from '@veltdev/react';

  export default function App() {

    return (
      <div>
        <VeltVideoPlayer 
          src={"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"} 
          darkMode={false}
          sync={true}
        />
      </div>
    );
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Video Player documentation</title>
    </head>
    <body>
      <!-- dark-mode="false" - to disable dark mode -->
      <!-- sync="true" - to enable sync mode -->
      <velt-video-player 
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
          dark-mode="false"
          sync="true"
      >
      </velt-video-player>
    </body>
  </html>

  ```
</RequestExample>
