videojs-seek-buttons | videojs plugin which adds buttons to seek forward or back n seconds | Plugin library

I've made a demo below which shows the video element with a canvas overlay. The canvas renders the video with the same position and size as the video itself. If you Run code snippet and then Full page you'll get the best result.

To make sure that both the video and canvas are the same size, set the container to 500x500 with the video and canvas to 100% width and height.

I've use object-fit: cover; to make the video fully expand the width and height of the container.

Now, the video might be a lot larger than 500x500, so we'll need to convert a (for example) 1920x1080 video to a 500x500 viewport. To do this we'll need to make some calculations.

We start off by calculating the shrink factor. The height of the video will be the same height of the canvas, but the width of the video must shrink the same amount of pixels to make sure that the aspect ratio of the video stays the same.

Therefor we calculate height of canvas / height of video x 100. This gives us percentage that the video must shrink to fit the height of the canvas while keeping the right aspect ratio.

Now because the width of the video is still larger than the width of the canvas, we'll need to offset the video a bit to the left to center our video. We do this by doing (new video width - canvas width) / 2. This is the number in pixels the video needs to move left.

Use these values to draw the video in canvas element with the right dimensions.