video tag take up full browser space

Question

I am trying to have my video take up the whole browser size when I enter the page. However I am seeing a bit of the next <div>

Here is the HTML for the page:

Here is the CSS for the video-containter:

.video-container {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: no-repeat;
    background-size: cover; 
}

The <section> with class="index" contains nothing:

.index {

}

Maybe this can help you: http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements — h0ch5tr4355, Nov 13 '15 at 09:12

Matej Đaković · Answer 1 · 2015-11-13T13:23:29.097

2

Are you try with vw and vh ?

.video-container {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: relative;
    background: no-repeat;
    background-size: cover; 
}

vh (viewport height)
vw (viewport width)

edited Nov 13 '15 at 13:23

answered Nov 13 '15 at 09:14

Matej Đaković

860
4
22

zer00ne · Accepted Answer · 2015-11-13T14:28:11.083

Use vh and vw as @theStreets93 suggested but I find I get better results when it's applied to the body and html, then make a child element (such as .video-container) at 100%. Making the body and html relative and .video-container absolute will give you complete control by setting top, bottom, left, and right to 0, but it might stretch and distort your video so adjust accordingly. The resets of margin, padding, and border as well as box-sizing: border-box/inherit should counteract UA defaults like that irritating 8px margin added to body.

I noticed that in your HTML .video-container is not a child of body and that you have several children of body as well. I suggest that you trim some of the superfluous elements and set the elements you do require to a height or line-height of 0 if possible. You might have to unwrap .video-container as well if your'e able to. Of course you might not have to do all that stripping away if the rest of your elements are static (i.e. position: static which is default). It's hard to tell since you haven't provided a proper demo. :\

html, body { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro';
    position: relative;
    width: 100vw;
    height: 100vh;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0; 
    padding: 0; 
    border: 0;
}

.video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: no-repeat;
    background-size: cover;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

I now have my CSS set to this: http://dpaste.com/2AW34XW This fills up the browser page but as I drag teh browser. I notice that the text starts to overlap the video. http://postimg.org/image/6ktgk93kx/ — Liondancer, Nov 14 '15 at 08:43
I managed to create a jsfiddle!: https://jsfiddle.net/reactjs/69z2wepo/ If you dragged the window around. You can see the text overlap the video — Liondancer, Nov 14 '15 at 09:21

video tag take up full browser space

2 Answers2