# Video Placeholder

`VideoPlaceholder` displays when a participant's video is off. Rendered by [`ParticipantView`](/video/docs/react/ui-components/core/participant-view/) over the video element. See the [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/) for more.

## Best Practices

- Always extend your wrapper's `style` with the `style` prop from `ParticipantView`.
- Show participant avatar or name as fallback when video is disabled.

### Video placeholder component

```tsx {7,12}
import {
  useParticipantViewContext,
  type VideoPlaceholderProps,
} from "@stream-io/video-react-sdk";

const CustomVideoPlaceholder = ({ style }: VideoPlaceholderProps) => {
  const { participant } = useParticipantViewContext();

  return (
    <div style={{ ...style, width: "100%", background: "#ddd" }}>
      {/* display profile picture if available */}
      {participant.image && (
        <img
          style={{ width: 100, height: 100, borderRadius: 9999 }}
          src={participant.image}
          alt={participant.id}
        />
      )}
      {/* otherwise try to display name or fallback to ID */}
      {!participant.image && <span>{participant.name || participant.id}</span>}
    </div>
  );
};
```

`VideoPlaceholder` renders over the video element for performance. The `style` prop from `ParticipantView` provides positioning - always extend your wrapper's style with it.

## Final steps

Pass this custom `VideoPlaceholder` to layout components or directly to `ParticipantView` as described in the [ParticipantView customizations guide](/video/docs/react/ui-cookbook/participant-view-customizations/).


---

This page was last updated at 2026-06-12T08:03:55.225Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-cookbook/video-placeholder/](https://getstream.io/video/docs/react/ui-cookbook/video-placeholder/).