AspectRatioBox
AspectRatioBox component is used to embed responsive videos and maps, etc. It uses a very common padding hack to achieve this.
Import#
Embed Video#
To embed a video with a specific aspect ratio, use an iframe with src pointing
to the link of the video.
Use <Box as="iframe"> instead of <iframe> directly because we're
forwarding some style props behind the scene.
Pass the maxWidth prop to AspectRatioBox to control the width of the
content.
Editable Example
Embed Image#
Here's how to embed an image that has a 4 by 3 aspect ratio.
Editable Example
Embed a map#
Here's how to embed a responsive Google map using AspectRatioBox. To make the
map take up the entire width, we can ignore the maxWidth prop.
Editable Example
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| ratio | number | 4/3 | The aspect ratio of the content |