Video tag to fill 100% div regardless of ratios
Use object-fit
css property, though there is no support for IE, but it's still quite reasonable to be used for <video>
, <img>
tags.
Check CanIUse for Browser Support, and CSS-Tricks for usage.
Example:
/** If parent has some defined width/height */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
Simple CSS inheit
video {
width: inherit;
height: inherit;
}
div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
}
You can use a solution like this one. Ratio dont change, but you may lose the right part of the video.
video#bgvid {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
Edit :
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video>
or <img>
Demo