How to zoom in video in its center while clipping its margin to remain in the original place and with the original size?

I want to make a little design part: a video that runs muted and when mouse goes over it it zooms in, but it is still the same size because it is clipped at the margins. It would be even more beautiful to make the video zoom in into the point where the mouse cursor is over it.

Expected result: video zooms in and is clipped at its margins. The video is zoomed in in its center-middle point.

Actual result: I was not able to implement this design because the ::after pseudo-element does not seem to work for me on video tags. And I can't get a div to have the size of the video without JS. But at least the mouse-over autoplay works and the normal zoom-in (scale transform) works well. (There are no error messages.)

Is there a JS library that does this?

HTML

<div class="video container">
  <!-- <div class="single video container"> -->
    <video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
  <!-- </div> -->
</div>

SCSS

.video.container {
  grid-row: 1/2;
  grid-column: 1/2;
  display: flex;

  video {
    width: 38vh;
    height: 30vh;
    position: relative;
    left: 15vw;
    top: 15vh;
    transition: transform 0.2s;
    overflow: hidden;

    &:hover {
      transform: scale(1.2);
    }
  }
}

Thank you.

Solution

I achieved something not perfect but it is enough for me currently. The issue is that the video is put in cover mode so the video element does not show its full contents, but the visual effect is similar.

<div class="videos">
  <div class="video">
    <video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
  </div>
</div>

And the working SCSS:

.videos {
  grid-row: 1/2;
  grid-column: 1/2;

  .video {
    position: relative;
    left: 15vw;
    top: 20vh;
    width: 38vh;
    height: 30vh;
    overflow: hidden;

    video {
      width: 38vh;
      height: 30vh;
      object-fit: cover;
      transition: transform 0.2s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }
}