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

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