AspectRatioBox component is used to embed responsive videos and maps, etc. It uses a very common padding hack to achieve this.
To embed a video with a specific aspect ratio, use an iframe with
to the link of the video.
<Box as="iframe"> instead of
<iframe> directly because we're
forwarding some style props behind the scene.
maxWidth prop to
AspectRatioBox to control the width of the
Here's how to embed an image that has a 4 by 3 aspect ratio.
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
|ratio||4/3||The aspect ratio of the content|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2019 Segun Adebayo