HTML5 Video with Fixed Height, But Scale Width to 100%

Background video with 100% width and fixed height

After understanding what you are trying to achieve...

You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.

#video-bg {  position: relative;  width: auto;  min-width: 100%;  height: auto;  background: transparent url(video-bg.jpg) no-repeat;  background-size: cover;}video {  display: block;}.video-container {  width: 100%;  max-height: 600px;  overflow: hidden;  position: fixed;  top: 0;  right: 0;  z-index: -100;}

<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]--><div class="video-container">  <video autoplay loop muted id="video-bg">
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
  </video></div>

Video 100% width and height

You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();

HTML5 video stretch with fixed height

You are close, all you need is to make the height: auto or removing it altogether. Regarding your width, if you have a limit on how wide you need it to expand, you can specify this via max-width and min-width. I recommend not going less than 320px for min widths as this is the smallest screen you will need to support.

EDIT After working with OP on the specifics of the question, we have determined that to maintain fixed height on HTML5 Video Stretch; you need the following wrapper code:

<div style="overflow: hidden; width: 100%; height: 314px;">
  <video height="auto" width="100%" autoplay loop>
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4">
  </video>
</div>

Where overflow: hidden, width: 100% and height: 314px are preserved for the inner video element.

HTML Video does not occupy 100% width

Videos are commonly encoded with the AR (Aspect Ratio) of 16:9 (16 width to it's 9 height).

Set video element to:

  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;

That should make it be able to stretch at it's maximum length

Then apply this to the container:

    position: relative;
    height: 0;
    width: 100%;
    padding-bottom:56.25%;

This will collapse itself, and expand at the same time. The strangepadding-bottom value will act like ceran wrap over a plate of food. This combo of styles is responsive and pretty well established.

SNIPPET

body {  margin: 0;}
.container {  height: 100vh;  position: relative;}.container .video {  position: absolute;  height: 0;  width: 100%;  padding-bottom:56.25%;}.container .video video {  position: absolute;  top: 0;  left: 0;  height: auto;  width: 100%;}

<div class="container">  <div class="video">    <video muted autoplay loop>      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">    </video>  </div></div>

Place video with 100% height & 100% width using css or javascript

You may try:

header {    position: relative;    background-size: cover;    background-position: 50% 50%;    height: 100vh;    z-index: 0;}header h1 {    text-align: center;    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;    color: #fff}header video {    -webkit-transform: translateX(-50%) translateY(-50%);    -moz-transform: translateX(-50%) translateY(-50%);    -ms-transform: translateX(-50%) translateY(-50%);    -o-transform: translateX(-50%) translateY(-50%);    transform: translateX(-50%) translateY(-50%);    position: absolute;    top: 50%;    left: 50%;    min-width: 100%;    min-height: 100%;    width: auto;    height: auto;    z-index: -100;}

<header>    <h1>Sample Title</h1> <video autoplay loop class="bg-video">  <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> </video></header>

HTML5 video fit width OR height

Solved it myself with a javascript function:

window.addEventListener('resize', resize, false);

video.height = 100; /* to get an initial width to work with*/
resize();

function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */

    if (windowRatio < videoRatio) {
        if (window.innerHeight > 50) { /* smallest video height */
                video.height = window.innerHeight;
        } else {
            video.height = 50;
    }
    } else {
        video.width = window.innerWidth;
    }

};

Make video fit 100% with any screen resolution

Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG

So your CSS would be:

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

HTML:

<div class="video-container">
  <video>
    <source src="~/Videos/myvideo.mp4" type="video/mp4" />
  </video>
</div>