Search code examples
javascriptjqueryhtmlhtml5-video

Crop video in HTML?

I want to crop a video in HTML 5.

<video id="glass" width="640" height="360" autoplay>
    <source src="invisible-glass-fill.mp4" type="video/mp4">
</video>

The resolution of the video is 640x360, but when I set the width attribute to 200, the video will rescale (retain the aspect ratio). How to crop the video (cut off, say, 220 pixels from both the left and right side) through HTML or Javascript? Is it even possible without cropping the video through video editing software?

Solution

  • I would recommend you to do it with CSS and a wrapper:

    HTML

    <div class="container">
    <video id="glass" width="640" height="360" autoplay>
        <source src="invisible-glass-fill.mp4" type="video/mp4">
    </video>
</div>

    CSS

    .container {
    width: 200px;
    overflow: hidden;
    display: block;
    height: 360px;
}

#glass {
    margin-left: -220px;
}