Aspect Ratio

AspectRatio component is used to embed responsive videos and maps, etc.



import { AspectRatio } from '@chakra-ui/react'

Embed Video#

To embed a video with a specific aspect ratio, use an iframe with src pointing to the link of the video.

Pass the maxWidth prop to AspectRatio to control the width of the content.

// This video will have equal sides
<AspectRatio maxW='560px' ratio={1}>

Embed Image#

Here's how to embed an image that has a 4 by 3 aspect ratio.

<AspectRatio maxW='400px' ratio={4 / 3}>
<Image src='' alt='naruto' objectFit='cover' />

Embed a map#

Here's how to embed a responsive Google map using AspectRatio. To make the map take up the entire width, we can ignore the maxWidth prop.

<AspectRatio ratio={16 / 9}>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel