Video 100% width and height

By checking other answers, I used object-fit in CSS:

video {
    object-fit: fill;
}

From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Value: fill

The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.


If you're looking for the equivalent to background-size: cover for video.

video {
  object-fit: cover;
}

This will fill the container without distorting the video.


PS: I'm extending on Leo Yu's answer here.


Easiest & Responsive.

<video src="full.mp4" autoplay muted loop></video>

<style>
    video {
        height: 100vh;
        width: 100%;
        object-fit: fill; // use "cover" to avoid distortion
        position: absolute;
    }
</style>

video {
  width: 100%    !important;
  height: auto   !important;
}

Take a look here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php


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();