Video Placeholder

The VideoPlaceholder component is a combination of elements that serves as a fallback in the absence of an active video feed. This component is conditionally rendered by the ParticipantView core component over the video element, learn how to customize your ParticipantView in the participant view customizations guide.

In this guide we’ll learn how to build and implement our own primitive video placeholder component.

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>
  );
};

We’ve mentioned that VideoPlaceholder component is rendered over the video element. This is done so that the SDK can keep working with the same video element instance for performance reasons. As you can see, we’ve highlighted a few lines which are recommended way to implement our placeholder component. This extra style property comes from the ParticipantView component and currently only provides absolute positioning but this might be a subject to change so to make future updates easier, we recommend you to extend your “wrapper” element’s style with style property provided by the ParticipantView component.

Final steps

Now we can pass this custom VideoPlaceholder component down to our call layout components or directly to ParticipantView component in our custom call layout as described in the aforementioned ParticipantView customizations guide.