@100mslive/roomkit-react/src/Video/Video.mdx


## `<Video />` component

You can directly use `<Video />` all it needs is `trackId` to render the video. This is a headless component to style it you can pass only valid css styles and className.

```jsx
import { useVideo } from '@100mslive/react-sdk';
import { Video } from '../';

const VideoComponent = () => {
  return <Video trackId="2" />;
};
```

## Styled Video component

We use Stitches as our styling solution which provides a `css` prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.

Here's an example:

```jsx
const StyledVideoComponent = () => {
  return <Video css={{ width: 500, height: 300 }} trackId="2" />;
};
```