AspectRatio

AspectRatio component is used to embed responsive videos and maps, etc. It uses a very common padding hack to achieve this.

Import

import { AspectRatio } from '@sajari-ui/core';

import { AspectRatio } from '@sajari-ui/core';

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 scenes.

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

Editable Example

// This video will have equal sides
<AspectRatio maxWidth="max-w-2xl" borderRadius="rounded" overflow="overflow-hidden">
  <Box as="iframe" title="Chernobyl (2019)" src="https://www.youtube.com/embed/s9APLXM9Ei8" allowFullScreen />
</AspectRatio>

// This video will have equal sides
<AspectRatio maxWidth="max-w-2xl" borderRadius="rounded" overflow="overflow-hidden">
  <Box as="iframe" title="Chernobyl (2019)" src="https://www.youtube.com/embed/s9APLXM9Ei8" allowFullScreen />
</AspectRatio>

Embed Image

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

Editable Example

<AspectRatio maxWidth="max-w-lg" ratio={4 / 3} backgroundColor="bg-gray-100" borderRadius="rounded">
  <Image src="https://source.unsplash.com/user/erondu" alt="Photo" objectFit="object-cover" borderRadius="rounded" />
</AspectRatio>

<AspectRatio maxWidth="max-w-lg" ratio={4 / 3} backgroundColor="bg-gray-100" borderRadius="rounded">
  <Image src="https://source.unsplash.com/user/erondu" alt="Photo" objectFit="object-cover" borderRadius="rounded" />
</AspectRatio>

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.

Editable Example

<AspectRatio ratio={1} borderRadius="rounded" overflow="overflow-hidden">
  <Box
    as="iframe"
    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d53049.54485302262!2d151.28657919999998!3d-33.796915199999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1592655739603!5m2!1sen!2sau"
    alt="demo"
  />
</AspectRatio>

<AspectRatio ratio={1} borderRadius="rounded" overflow="overflow-hidden">
  <Box
    as="iframe"
    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d53049.54485302262!2d151.28657919999998!3d-33.796915199999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1592655739603!5m2!1sen!2sau"
    alt="demo"
  />
</AspectRatio>

Props

Name	Type	Default	Description
ratio	`number`	16/9	The aspect ratio of the content