AspectRatio 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.
maxWidth prop to
AspectRatio to control the width of the content.
Here's how to embed an image that has a 4 by 3 aspect ratio.
Here's how to embed a responsive Google map using
AspectRatio. To make the map
take up the entire width, we can ignore the
|css||The emotion's css style object||-|
|ratio||The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`||-|