Crop video in HTML?

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!

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