CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
MC Emperor
MC Emperor

Reputation: 23037

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?

Upvotes: 32

Views: 97192

Answers (3)

OG Sean
OG Sean

Reputation: 1065

Try using CSS property:

object-fit: cover;

As opposed to Object-fit: contain; which is the default that you're describing where the video sizes down to fit fully inside the box with no crop and black bars on either top/bottom or left/right. object-fit: cover will cover the whole video box and allow the extra amounts that go outside the box to be cropped off.

In the cover mode, you could just set the width/height of the video element as needed like any normal HTML element, and it will crop whatever doesn't fit naturally with a center/center alignment.

object-fit: cover;
object-align: center center; /* default, anchor to center of video */

If you want to change the alignment, for example to crop towards the top, right, bottom, left etc, just additionally use the object-position CSS property. For example, "cover" object-fit with object-align: top left would anchor the top left corner in place, cover the whole video box, scale up to cover the player at whatever size it's set to, and crop everything that sticks out beyond the edges on the right or bottom.

object-fit: cover; /* cover the whole video box, no black bars */
object-align: top left; /* anchor to top left corner of video */

The object-align property can also take pixel or percentage values aside from the keywords presets of center, top, bottom, right, left to get more exact with it if needed.

Upvotes: 11

Alvaro
Alvaro

Reputation: 41605

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

Upvotes: 44

Lichen
Lichen

Reputation: 97

I ran into the same need (wanting to crop video on the fly instead of cropping the actual video).

My solution is pretty simple, and works so that you don't need to specify the height or width of the container in absolutes, therefore it's responsive. I've just used inline styles here for simplicity, but you can easily move the css to classes etc.

<div style="overflow: hidden;">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" style="margin-top: -10.5%; margin-bottom: -10.5%"></video>
</div>

In this example I used negative margins in percentages. Keep in mind that using percentages, that they're calculated based on the container's width. So it's not 10.5% of the videos's height. I think you'd need to use javascript if you were wanting to do that. However, with this approach you can also use vh or vw units. Or do what Alvaro suggested and set widths on the container if you want it to be absolutely sized, and use px to set the margins.

Check out this codepen for more examples!

Upvotes: 0

Related Questions