Crop video in HTML?

Question

I want to crop a video in HTML 5.

Answer 1

I solved the same problem with another approach:

I just cropped the video using an online tool: https://ezgif.com/crop-video

This has 2 advantages:

1. faster then creating canvases, think about their styling and responsiveness
2. smaller video file -> less data transfer

I know that this is not what you asked for, but maybe it helps some other folks, coming across this post.

Answer 2

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

Answer 3

What you could do is use canvas and copy a the portion of the video you like. Here is some reference: http://developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/