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


Tags: javascript,css,html5-video

Problem :

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 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.
  2. 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.

I imagine setting properties like top and left to designate the start point for the video, then setting properties like bottom and right or height and width to designate how wide and high the video will will be shown from the start point.

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 the solution in this answer, 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.


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.

Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480. enter image description here Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480. 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. 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. enter image description here



Solution :

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.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>

  <link href="http://vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.10/video.js"></script>
  
<style type="text/css">
.clipvid {  
	position: relative;
	width: 640px;
	height: 480px;
	overflow: hidden;
}
.clippedvid {
	position: absolute;
	top: 0;
	left: -106px;
}
/* This is from the css for video.js. I had to make these changes.*/ 
.vjs-default-skin .vjs-control-bar {
  width: 75%;
  left: 12.5%;
}
  
  
</style>
  
</head>

<body>
<div class="clipvid">
    <video class="clippedvid video-js vjs-default-skin" width="852px" height="480px" controls autoplay data-setup="{}">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</div>


<video class="video-js vjs-default-skin" width="852px" height="480px" controls data-setup="{}">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

</body>
</html>

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.


    CSS Howto..

    How to toggle display: inline and display toggle?

    How to center modal window in css+html?

    How to make a vector background image in css instead of using jpg or png

    how to make a child div visible when clicking its parent div in pure css

    How can I stay organized when writing CSS? [duplicate]

    Show/Hide Div in jQuery, issue with “skipping” divs

    Flex 4 How to set background image to VBox?

    How to accomplish this layout with CSS and HTML?

    CSS - How to make rectangle with pointed sides? [duplicate]

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How to change the css and html file at the same time

    Wordpress Menus are not showing up correctly?

    How to know which CSS style is applied and from where (javascript)?

    How to prevent a div from disappearing when you hover a link in pure css

    How can I inline the label with the input horizontally and the inputs vertically

    How to add CSS reference link to local HTML files in folder?

    How to hide extra overflow part of this angled css ribbon?

    How to achieve this layout with div and css?

    How to force child element adherence to `flex: nowrap;` CSS directives

    How to write CSS to convert div elements into a 3 or 4 column table?

    How to apply a CSS height setting to all child elements?

    How to get CSS background property to work with toggleClass() in jQuery?

    How to decrease the width of this div so that another div can come next to it?

    How to add css class by default for all the images

    How to know where to use css, less and Sass? [closed]

    How Do I Make Li Clickable for Radio Button Inside

    How to break a table with CSS diagonally or vertically?

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    How to create a CSS Animation that is responding to horizontal mouse movement? [closed]