AspectRatioBox

AspectRatioBox component is used to embed responsive videos and maps.

Import

import { AspectRatioBox } from '@outfitio/outkit';

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.

Embed Image

Embed Map

To make the map take up the entire width, we can ignore the maxWidth prop.

Accessibility

• Always include an alt attribute when embedding an image.
• Alt text should be accurate and equivalent to the original image, and communicate the same content and function.
• Purely decorative images should have null alt text (alt="").

Props