Media handles responsive media content with support for lazy loading, aspect ratios, and intelligent rendering of videos or embeds. Use it for dynamic content blocks with consistent behavior.
Show a skeleton block while content is loading. Only works when aspectRatio is specified.
The caption prop renders a ReactNode below the image, making it easy to provide additional details. The media and the caption are wrapped in a figure, with the caption as its figcaption.
Enable full-screen zooming for images and videos.
The Media component will automatically detect the aspect ratio of the image and set it to auto if not specified. You can provide an explicit aspect ratio using the aspectRatio prop.
Use the stretch prop to drop the intrinsic aspect ratio and let the media take whatever box it is in. (fill is the layout prop every component has — fillWidth and fillHeight together.)
You can pass a number to sizes for a common responsive pattern.
sizes={768} expands to (max-width: 768px) 100vw, 768px.
The component auto-detects and renders YouTube links, just pass a YouTube URL to the src prop.
For MP4 and other file-based video, set controls to render a minimal custom player with play/pause, seek, mute, and fullscreen. Keyboard shortcuts: space (play/pause), m (mute), f (fullscreen), arrow keys (seek).