What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

Question

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the cursor is placed.

Desired outcome: Video zooms in and stays clipped at its edges. The zoom happens around the center of the video.

Current issue: I haven't been successful in implementing this design because the ::after pseudo-element doesn't seem to work with video tags for me. I also can't figure out how to make a div match the size of the video without using JavaScript. However, the autoplay on mouse-over feature works and the basic zoom-in effect (scale transform) works smoothly. No error messages are displayed.

Is there a JavaScript library available that can achieve this effect?

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

Any tips or suggestions would be greatly appreciated. Thank you!

javascript html css video zooming

Answer 1

Answer №1

If you need to create a masking effect on an element, you can utilize the Clipping method. By using the clip option, you can define a specific display area within your HTML element.

To implement this, simply insert a rectangle inside your div to establish the "viewing area" for the content, with dimensions specified in pixels (px). Here's an example code snippet demonstrating how to achieve this:

<div class="video container" style="clip: rect(X-Pos, Width, Height, Y-Pos);">

Below is a sample code showcasing how you can apply this technique practically. In this demonstration, when hovering over the video container, a zoom effect is triggered while maintaining the video within the defined rectangular boundaries:

<!DOCTYPE html>
<html>

<body>

<div class="video container" onMouseOver="do_VidZoom()" width="640" height="480" style="position: absolute; top: 0px; left: 0px; clip: rect(0px, 640px, 300px, 0px);">
 
<video id="vid" width="640" height="480" muted loop>
<source src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" type="video/mp4">
</video>

</div>

</body>


<script>

function do_VidZoom ()
{ 
    // Define animation keyframes from normal size (scale 1) to double size (scale 2)
    var frames_VidZoom_In = [
                                { transform: 'scale(1, 1)', transition: 'transform 0.1s' },
                            
                                { transform: 'scale(2, 2)', transition: 'transform 0.1s' }
                                    
                            ];
    
    // Apply animation to the video element
    document.getElementById("vid").animate( frames_VidZoom_In, { duration: 3000, easing: 'ease-in' } );
    
        
    // Set final size after animation ends to prevent reverting back to original scale
    document.getElementById("vid").style.transform = "scale(2,2)";
    
}

</script>
</html>

Answer 2

If you need to create a masking effect on an element, you can utilize the Clipping method. By using the clip option, you can define a specific display area within your HTML element.

To implement this, simply insert a rectangle inside your div to establish the "viewing area" for the content, with dimensions specified in pixels (px). Here's an example code snippet demonstrating how to achieve this:

<div class="video container" style="clip: rect(X-Pos, Width, Height, Y-Pos);">

Below is a sample code showcasing how you can apply this technique practically. In this demonstration, when hovering over the video container, a zoom effect is triggered while maintaining the video within the defined rectangular boundaries:

<!DOCTYPE html>
<html>

<body>

<div class="video container" onMouseOver="do_VidZoom()" width="640" height="480" style="position: absolute; top: 0px; left: 0px; clip: rect(0px, 640px, 300px, 0px);">
 
<video id="vid" width="640" height="480" muted loop>
<source src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" type="video/mp4">
</video>

</div>

</body>


<script>

function do_VidZoom ()
{ 
    // Define animation keyframes from normal size (scale 1) to double size (scale 2)
    var frames_VidZoom_In = [
                                { transform: 'scale(1, 1)', transition: 'transform 0.1s' },
                            
                                { transform: 'scale(2, 2)', transition: 'transform 0.1s' }
                                    
                            ];
    
    // Apply animation to the video element
    document.getElementById("vid").animate( frames_VidZoom_In, { duration: 3000, easing: 'ease-in' } );
    
        
    // Set final size after animation ends to prevent reverting back to original scale
    document.getElementById("vid").style.transform = "scale(2,2)";
    
}

</script>
</html>

Answer 3

Answer №2

I accomplished something that may not be perfect, but it satisfies me at the moment. The only issue I encountered was that the video was set to display in cover mode, causing it to not show its full content. However, the visual effect remains similar.

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

Below is the SCSS code being used:

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

Answer 4

I accomplished something that may not be perfect, but it satisfies me at the moment. The only issue I encountered was that the video was set to display in cover mode, causing it to not show its full content. However, the visual effect remains similar.

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

Below is the SCSS code being used:

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

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

HTML

SCSS

Answer №1

Answer №2

Similar questions

Building a single page web application using TypeScript and webpack - a step-by-step guide

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

How to create a dropdown menu in React js with an array of items

Align the middle element in a dynamic row

Retrieving a list of numbers separated by commas from an array

Tips for personalizing PNG images within an SVG element

`Balance in structure`

Activating the Speech Recognition feature in a form triggers the submission of a post

What is the best way to display JSON within a partial?

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

Mutation observer fails to observe an element if it is housed within a function

Uploading files in React.js using Yii2 API

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

JQuery receives an enchanting response from the magic line

Having issue updating a MySQL table using an array of objects in JavaScript

How can you prevent JQuery AJAX from automatically redirecting after a successful form submission?

The button remains in a pressed state when viewed on a mobile device

JavaScript Animation of Text

drawing tool with JavaScript and HTML5

The functionality of enabling and disabling dynamic behavior in AngularJs is not functioning as anticipated