How to emulate aspect ratio change using CSS animation?

Question

I've tried researching using a couple of sources, but none of them focused on my problem specifically. I want to use CSS, if possible, to get a border effect that emulates some aspect ratio changes, going from something like a 2.76:1 to 1.90:1.

Something like this: https://www.tiktok.com/@reeseirby/video/7535567446086864159?

I used some code from w3schools, but I only found animation that has both borders going in the same direction, while I'd like them to go in opposite directions. I'm new to this so there's definitely something I'm missing, but I can't find the necessary information. Code I'm currently using:

Animation of border-top-width

Gradually change the border-top-width property from 1px to 15px, then back

#myDIV {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  50% {
    border-top-width: 15px;
  }

  50% {
    border-bottom-width: 15px;
  }
}

<div id="myDIV"></div>

Answer 1

I would not bother with borders.
Create a wrapper element (with black background) and play with child <video> CSS aspect-ratio.

In the example below, on a radio button check, I modify a CSS Property --ar value that is then applied to a flex centered video element's aspect-ratio: var(--ar).

:root {
  --ar: 1.90 / 1;
  font: 1rem/1.4 system-ui, sans-serif;
}

label:has([type="radio"]) {
  background: #ddd;
  border-radius: 0.2rem;
  padding: 0.2rem 0.5rem;
  &:has(:checked) {
    background: #0bf;
  }
  input {
    width: 0;
    height: 0;
    position: absolute;
  }
}

.video-wrapper {
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  aspect-ratio: 16 / 9;
}

#video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  transition: 3s;
}

:has(#ar-1_90-1:checked) {
  --ar: 1.90 / 1;
}

:has(#ar-2_76-1:checked) {
  --ar: 2.76 / 1;
}

:has(#ar-16-9:checked) {
  --ar: 16 / 9;
}

:has(#ar-4-3:checked) {
  --ar: 4 / 3;
}

<label><input type="radio" name="ar" id="ar-1_90-1" checked>1.90/1</label>
<label><input type="radio" name="ar" id="ar-2_76-1">2.76/1</label>
<label><input type="radio" name="ar" id="ar-16-9">16/9</label>
<label><input type="radio" name="ar" id="ar-4-3">4/3</label>
<br>
<div class="video-wrapper">
  <video id="video" muted autoplay loop src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4"></video>
</div>

The trick to center the video element is taken from: Preserve centered child element aspect ratio