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

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);
      }
    }
  }
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top