32

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 the whole background;

c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.

I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio.

it works in the fidlle .... maybe because the screen is small, maybe because fiddle is a better browser...

<body>
<div class="wrapper">
    <div class="header">
     .....
    </div>
    <div class="out-video">
        <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
            <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
            <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
        </video>
     </div>
</div>

The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video.

Thank you for any suggestion in advance.

PS. It seems that android family does not play the video!

l

2
  • The webm version seems to be missing. Perhaps you need to set permissions for that format on your server. It's not exactly clear what your requirements are, though.
    – ralph.m
    Commented Apr 4, 2014 at 22:42
  • The link to it gives a 404. That may be because the server isn't set to allow that file type, which you can easily fix with a line in your .htaccess file.
    – ralph.m
    Commented Apr 5, 2014 at 3:02

4 Answers 4

41

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;
}
19

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

2
  • Thank you. Jquery solution seems to add the header to viewport so there will be a scroll bar, which is acceptable. I was trying to have no scroll bar, full bottom div (width:100% and height:85% of viewport). The problem is that video is not elastic like image... it overwrites !important.... and everything else. it's easy to have the full video with empty side panels, full div with scroll bar or hide overflow. Change the ratios of the video to fill div and have a full video is something. Commented Apr 4, 2014 at 23:51
  • Ohhhh..I like this one
    – agon024
    Commented Mar 29, 2019 at 23:02
3

Simple CSS inheit

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}
2
  • You might want to use a class name instead of div
    – Greg
    Commented Jul 12, 2020 at 22:09
  • 1
    Ok thanks I just wrote this for my personal project and came across someone who had the same problem as me and didn't want anyone else to waste their time with all the other answers that didn't work Commented Jul 16, 2020 at 20:05
1

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%;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.