[SOLVED] Crop video in HTML?

Issue

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 640×360, 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;
}

Answered By – Alvaro

Answer Checked By – Willingham (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *