HTML5 video with fixed height, but scale width to 100% - css

Question

What I want to do is have an HTML5 video scale 100% width of the page, but maintain a fixed height of 650px.
The following code scales to maintain aspect ratio, which is not what I need:
<header>
<video width="100%" autoplay="autoplay">
<source src="video.webm" type="video/webm; codecs=vp8,vorbis">
</video>
</header>
I also tried a max-height="650px" but this only centres the video and leaves whitespace on either side.

Answer 1

What paypal does is scaling up the video according to the viewport. But they dont go mobile, and this is a problem.
So if you want to scale your video from small to big devices, you can put your video with the basic markup:
<video width="100%" height="auto">...
This is going to scale up your video. The problem is when you go to a small viewport. The video will scale down but can be too small, so you can define a min-height and use CSS transforms to scale up the video aspect:
video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
With media queries you can define breakpoints and scale the video for those screens.
Also with some javascript you can also define a point of focus for your video (if some area of the video is more important).
Check this link for more details on that:
http://viget.com/extend/fullscreen-html5-video-with-css-transforms

Answer 2

I have achieved this by wrapping it into two containers with a set height (750px i.e.), backface-visibility: hidden; and overflow:hidden; - so the video gets larger in total but is being cropped off at the bottom (thanks to https://codepen.io/dudleystorey/pen/knqyK & http://fasett.no/ ):
.header {
height:750px;
overflow: hidden;
}
video {
display: block;
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
overflow-y: hidden;
vertical-align: top;
}
.container_video {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
height: 100%;
z-index: 1;
position: relative;
}
<header class="header">
<div class="container_video">
<video preload="auto" autoplay loop muted poster="img/videobg.png" id="bgvid" src="//demosthenes.info/assets/videos/polina.mp4" ></video>
</div>
</header>