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.

naruto
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#

NameTypeDefaultDescription
rationumber4/3The aspect ratio of the content

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo