title: How can I show only a section of a video frame with CSS or JavaScript?
body: <p>I want to show only part of the video frame for a given video. Let me explain what I mean with examples:</p>
  
  <ol>
  <li>I have a wide screen video (852 x 480) but I want to display it as a full screen video (640 x 480) by using CSS or JavaScript to imitate cropping it. The video file doesn't change; the script just hides the pixels at the sides.</li>
  <li>I have a non-standard sized video that is a custom mix of two 640 x 480 video side-by-side, so it is 1280 x 480 in total size. Without having to edit the video, I would like to imitate having two videos play simultaneously on a page, but it will be from this single source video. I would like to make two video elements 640 x 480 and one focuses on the part to the left and the other focuses to the part on the right on the 1280 original video source.</li>
  </ol>
  
  <p>I imagine setting properties like <code>top</code> and <code>left</code> to designate the start point for the video, then setting properties like <code>bottom</code> and <code>right</code> or <code>height</code> and <code>width</code> to designate how wide and high the video will will be shown from the start point.</p>
  
  <p>I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on <a href="https://stackoverflow.com/a/13583183/1934286">the solution in this answer</a>, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.</p>
  
  <hr>
  
  <p>Here's some images to show what I want to accomplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.</p>
  
  <p>Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480.
  <img src="https://i.stack.imgur.com/IVjbD.png" alt="enter image description here">
  Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480.
  <img src="https://i.stack.imgur.com/eI7aN.png" alt="enter image description here">
  Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480.
  <img src="https://i.stack.imgur.com/5H991.png" alt="enter image description here">
  Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.
  <img src="https://i.stack.imgur.com/yKXjC.png" alt="enter image description here"></p>