Video tag to fill 100% div regardless of ratios

Question

I am tying to have a video tag to fill 100% of a div:

a) it doesn\'t need to keep the ratios(otherwise we need to use the overflow:none);

b) fill a div, not

Answer 1

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.

Answer 2

Simple CSS inheit

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}

Answer 3

You can use a solution like this one. Ratio dont change, but you can lost 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

Answer 4

Try this

HTML:

    <div id="MainBanner">
        <video autoplay muted loop>
            <source src="something-nice.mp4" type="video/mp4">
        </video>

        <div class="content">
            <h1>Heading</h1>
            <p>Some Content</p>
        </div>
    </div>

Less:

#MainBanner {
    position: relative;
    height: 100vh;
    overflow: hidden;

    video {
        background: url(cover.jpg) no-repeat;
        top: 0px;
        left: 0px;
        min-width: 100%;
        min-height: 100%;
    }

    .content {
        position: absolute;
        padding: 20px;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        width: 100%;
    }
}