How can I show only a section of a video frame with CSS or JavaScript?

Question

I want to show only part of the video frame for a given video. Let me explain what I mean with examples:

1. I have a wide screen video (852 x 480) but I want to d

Answer 1

I decided to go with the "hack" solution that I mentioned in the question. I was able to design it exactly as described, but if your selected portion of the video does not include the controls then you will have to make custom controls and design them to fit in the the selected portion. I did this with video.js.

It works well enough, but it seems that at least FF and Chrome will download the video once for each element, even though they call the exact same source file? This means in a setup where one page uses the same source video in two video separate elements, that source video will be downloaded twice. Clearly two temp files would be a waste of bandwidth. This might be cause to scrap this solution and come up with something else.