CODEWITHSUNDEEP
javascriptjquerycsshtmlresize
cnapsys
cnapsys

Reputation: 121

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

Upvotes: 1

Views: 2251

Answers (2)

Elvis
Elvis

Reputation: 1143

I'm not sure if this will work but Have you tried removing width: 100% and only keeping height: 100% ?

I might be able to give better suggestions, if you can show the code :p

EDIT: Since you want height to be screen height and width can be more or less, I'd say, try

    min-height: 100%;
    width: auto;
    height: auto;

This should do the trick

NEW EDIT:

body{
  overflow:hidden;
}
#wrapper {
  width: 100%;
  height: 100%;
}

.videoInsert {
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    position: absolute;
    left: 0%;
    top: 0%;
}
video{
      display: inline-block;
    vertical-align: baseline;
      object-fit: fill;
}

Upvotes: 0

ICE
ICE

Reputation: 1737

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

Upvotes: 1

Related Questions