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.