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

# Poster

> The `Poster` component displays a visual placeholder for media content prior to playback.

<iframe
  src={`https://ui-kit-docs-embed.vercel.app/player/poster`}
  height="600px"
  width="100%"
  frameBorder="0"
  allowFullScreen
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
  style={{
borderRadius: 10,
backgroundColor: "black",
}}
/>

<Info>
  When used with Livepeer's playback info API, `getSrc` will automatically parse
  any available thumbnail images in the JSON response and pass them to `Poster`.
  The example above assumes that the playback info has a "Thumbnail (JPEG)"
  source.
</Info>

## Features

* Displays a preview image as a placeholder while media is loading
* Conditionally renders based on the availability of a thumbnail image

## Anatomy

Import the components and piece the parts together.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Container>
      <Player.LoadingIndicator>
        <Player.Poster />
      </Player.LoadingIndicator>
    </Player.Container>
  </Player.Root>
);
```

## Props

`Poster` accepts all typical HTML `img` props.

<Info>
  It is usually used alongside a `Player.Video` with poster set to `null`, so
  that the default poster URL is not parsed and set on the HTML5 video element.

  It can be composed with custom img renderers, like Next.js Image, with the
  `asChild` prop, so you can customize the image loading to go through your
  optimization pipeline.
</Info>

### `forceMount`

Ensures consistent presence in the DOM, aiding in the smooth application of
animations.

### `src`

Specifies the URL for the poster image, allowing for a customized preview. If
not set, the component attempts to retrieve a poster from the media's context.

## Data Attributes

### `data-livepeer-poster`

Identifies the poster component within the Player.

### `data-visible`

Signifies if the poster is visible (`"true"`) or hidden (`"false"`), useful for
CSS-based animations.