Skip to main content
<DailyVideo sessionId={sessionId} />

​
Props

​
sessionId
string
required
The participant’s session_id for which the video track should be played.
​
automirror
boolean
default:"false"
When enabled, mirrors a local participant’s user-facing camera video.
​
fit
'contain' | 'cover'
default:"'contain'"
Determines whether the video should be fully contained or cover the element. See object-fit for details.
​
mirror
boolean
default:"false"
When set to true, video is mirrored.
​
playableStyle
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).
​
onResize
Function
Callback when the video element is resized. Reports the video’s height, width and aspectRatio.
​
style
Object
default:"{}"
Inline styles to be applied to the <video> element.
​
type
'video' | 'screenVideo'
default:"'video'"
The participant’s track type to play.
DailyVideo also accepts any other React.VideoHTMLAttributes.

​
Data attributes

DailyVideo renders a couple of dynamic data attributes:
AttributeDescription
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-idContains the corresponding sessionId
data-subscribed"true" or "staged" in case the video track is subscribed or staged
data-video-typeContains the corresponding type

​
Example

import { DailyVideo } from '@daily-co/daily-react';

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

​
See also

Components

Hooks