Image container
A 16:9 wrapper for photos and hero images. The child fills the entire container.
16:9 Image Container
<AspectRatio ratio={16 / 9}>
<img src="..." alt="..." className="h-full w-full rounded-lg object-cover" />
</AspectRatio>Video embed
The same 16:9 ratio sized for a video player placeholder. Swap the inner div
for an <iframe> or <video> element in production.
16:9 Video Player
<AspectRatio ratio={16 / 9}>
<iframe
src="https://www.youtube.com/embed/..."
title="Video title"
allowFullScreen
className="h-full w-full rounded-lg"
/>
</AspectRatio>Square placeholder
A 1:1 ratio useful for avatars, thumbnails, and album art.
1:1
<AspectRatio ratio={1}>
<div className="flex h-full w-full items-center justify-center rounded-lg bg-muted">
1:1
</div>
</AspectRatio>