Video 100% width and height

Question

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn't matter.

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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>

Solution 5

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

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

View more solutions