# Video fit
When the player and the video have different aspect ratios, you can choose how the video fits inside the player. These examples use a 21:9 player for a 16:9 video. Switch between the values of the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property to see the difference:
* `contain` (default) shows the whole video, with black bars on the sides.
* `cover` fills the player, cutting off the top and bottom of the video.
* `fill` fills the player by stretching the video.
## Open Video UI
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
containcoverfill
Set the `--theoplayer-video-object-fit` CSS custom property on the UI. `--theoplayer-aspect-ratio` sets the shape of the player itself.
```css
theoplayer-default-ui {
--theoplayer-aspect-ratio: 21 / 9;
--theoplayer-video-object-fit: cover;
}
```
Code
demo.html
```html
Video fit
```
## Default UI
containcoverfill
In the [Default UI](https://docs-preview.optiview.dolby.com/pr-913/theoplayer/ui/web/default-ui.md), set `object-fit` on the `