cnapsys cnapsys - 2 months ago 11
CSS Question

CSS positioning/resizing html5 video background

Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.

I'm trying to include a fullscreen video background and it seems I have hit a snag.

Below is an image of what I am trying to accomplish.

I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.

Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...

What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it

enter image description here

enter image description here

Answer

To prevent the problem you need to do this:

css:

.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}

and put your video inside div1:

<div class="div1">
     <video autoplay>...</video>
</div>
<div class="div2">
</div>

It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.

If you like to fit the video to the div1 add

 object-fit: cover;

to the video tag.

IE Doesn't Support object-fit

Comments