Limeplay - Open Source Video Player UI ComponentsLimeplay

Fallback Poster

Poster image overlay for loading states and Picture-in-Picture.

Installation

npx shadcn add @limeplay/fallback-poster

Requires mediaFeature registered in your createMediaKit.

Usage

Wrap the player layout to provide a background while the media element loads or when in PiP mode:

components/media-player.tsx
import { FallbackPoster } from "@/components/limeplay/fallback-poster"
import { LimeplayLogo } from "@/components/limeplay/limeplay-logo"
;<Layout.PlayerContainer>
  <FallbackPoster className="bg-black">
    <LimeplayLogo />
  </FallbackPoster>
  <Media as="video" />
</Layout.PlayerContainer>

Use Cases

  1. PiP overlay — When the video enters Picture-in-Picture mode, the poster replaces the native black overlay (inspired by Prime Video).
  2. Loading skeleton — Displays fallback content while the media element is mounting.

On this page