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