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

# Daily Video

> The DailyVideo component renders a video tag for a given participant's sessionId and track type.

`<DailyVideo sessionId={sessionId} />`

## Props

<ParamField body="sessionId" type="string" required>
  The participant's `session_id` for which the video track should be played.
</ParamField>

<ParamField body="automirror" type="boolean" default="false">
  When enabled, mirrors a local participant's user-facing camera video.
</ParamField>

<ParamField body="fit" type="'contain' | 'cover'" default="'contain'">
  Determines whether the video should be fully contained or cover the element. See [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for details.
</ParamField>

<ParamField body="mirror" type="boolean" default="false">
  When set to `true`, video is mirrored.
</ParamField>

<ParamField body="playableStyle" type="Object" default="{}">
  Inline styles to be applied when the video is in a playable state. These will overwrite styles passed with the `style` prop. Use this to style the `<video>` differently when it's playing or not (e.g. when the participant's camera is muted or not).
</ParamField>

<ParamField body="onResize" type="Function">
  Callback when the video element is resized. Reports the video's `height`, `width` and `aspectRatio`.
</ParamField>

<ParamField body="style" type="Object" default="{}">
  Inline styles to be applied to the `<video>` element.
</ParamField>

<ParamField body="type" type="'video' | 'screenVideo'" default="'video'">
  The participant's track type to play.
</ParamField>

`DailyVideo` also accepts any other `React.VideoHTMLAttributes`.

## Data attributes

`DailyVideo` renders a couple of dynamic `data` attributes:

| Attribute         | Description                                                                                                                                                   |
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-local`      | `"true"` in case the video comes from the local participant                                                                                                   |
| `data-mirrored`   | `"true"` in case the video is mirrored, due to `automirror` or `mirror`                                                                                       |
| `data-playable`   | `"true"` in case the video is in a playable state                                                                                                             |
| `data-session-id` | Contains the corresponding `sessionId`                                                                                                                        |
| `data-subscribed` | `"true"` or `"staged"` in case the video track is [subscribed or staged](/reference/daily-js/instance-methods/update-participant#param-set-subscribed-tracks) |
| `data-video-type` | Contains the corresponding `type`                                                                                                                             |

## Example

```jsx theme={null}
import { DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  return <DailyVideo automirror sessionId={sessionId} />;
}
```

## See also

<CardGroup>
  <Card title="Components" icon="layout" iconType="solid">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
  </Card>

  <Card title="Hooks" icon="code" iconType="solid">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>
</CardGroup>