Components / Media Player
Media Player
The hover-to-play media preview behind every content card: a single image, a multi-image slideshow, or a muted looping video, revealed with a fade once loaded.
import { MediaPlayer, MediaPlayerFull } from '@layers/ui/media-player'Rendered stock
House rules
- Hover is intent: video plays on enter and resets on leave; slideshows preload their slides on first hover and auto-advance while hovered; click steps to the next slide.
- It fills its parent; the caller owns the frame size, aspect ratio, and rounding.
- Pass mediaType when you know it; otherwise video is inferred from the file extension.
- On mobile, videos with a poster render the poster image instead of a video element.
- Use MediaPlayerFull for the expanded view: native video controls, slide arrows, and a counter.
- Styles ship with the component (media-player.css is self-imported).