Video Placeholder

VideoPlaceholder displays when a participant's video is off. Rendered by ParticipantView over the video element. See the ParticipantView customizations guide 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

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.

Join/Leave Notification Sound

Audio Volume Indicator