1. UI
  2. Aspect Ratio

UI

Aspect Ratio

This component is used to create a container with a fixed aspect ratio around a media provider.

Import

tsx
        import { AspectRatio } from '@vidstack/player-react';

      

Usage

The <AspectRatio> component creates a container that will try to hold the dimensions of the desired aspect ratio. Fixed dimensions are great for creating uniform and responsive boxes, or avoiding layout shifts while media loads over the network.

          
        

Styling

For the media to be rendered correctly, you need to ensure the media elements fill their container like so:

css
        vds-media {
  display: inline-block;
  width: 100%;
}

      

aspect-ratio

You can skip using this component, and use the aspect-ratio CSS property if browser support for it is suitable to your application.

css
        vds-media {
  display: inline-block;
  width: 100%;
}

video {
  aspect-ratio: 16 / 9;
}