UI

Aspect Ratio

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

# Import

        import '@vidstack/player/define/vds-aspect-ratio.js';

      

        <script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-aspect-ratio.js"
></script>

      

# Usage

The <vds-aspect-ratio> 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.

          
1
2
3
4
5
6
7
8
		    

# Styling

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

        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.

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

video {
  aspect-ratio: 16 / 9;
}