How to fit a video to fill 100% of its div

[Sandra Dolcezza]

Hello,

I have a video saved on my desktop that I would like to have fit responsivly in a div, although it does fit 100% of its width, it leaves a space top and bottom and shrinks as I scale the window down.

this is the code Im using..

<div class="electroststicTechnology">

<video autoplay loop muted width="100%" height="100%">
<source src="Video/Electrostatic_Technology.mp4" type="video/mp4"/>
<source src="Electrostatic_Technology.ogg" type="video/ogg"/>
</video>

</div>

CSS

.electroststicTechnologyPreview {
width: 40%;

height: 500px;
float: left;
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}

Thanks for your support !

[osgood_]

Try the below combination:

HTML:

<div class="electroststicTechnology">
<video autoplay muted>
<source src="Video/Electrostatic_Technology.mp4" type="video/mp4">
</video>
</div>

CSS:

body {

margin: 0;

}

.electroststicTechnology {
height: 100vh;

width: 100vw;
}

video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

[Sandra Dolcezza]

I didnt use this code as the other code you gave me did the trick. I will keep this in mind, thanks so much for your help, it is greatly appreaciated !

[Nancy OShea]

"although it does fit 100% of its width, it leaves a space top and bottom and shrinks as I scale the window down."

Do you really want to devote an entire page to just 1 video and nothing else?  I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.   It might help if we better understood what you're trying to achieve and how you expect it to behave on smaller screens. 

[osgood_ · Accepted solution]

I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.

I obviously read what the OP wanted very incorrectly. The below css would be the correct values for a div which is only 40% of the screen width and 500px high. Either way to keep the video at the height required you are going to have to allow automatic 'trimming' of the left and right side of the video and have it centered horizontally within the div:

.electroststicTechnology {
height: 500px;
width: 40%;
position: relative;
}

video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

[Sandra Dolcezza]

Good evening osgood_

This worked great !

Thank you so much for your time in helping me find the solution.

🙂

[Sandra Dolcezza]

Hello Nancy,

I had only included a clip of code I thought was necesary to help me out / was hoping to achieve a responsive type code that I can make minor tweaks to the styling if needed..

Thank you for your time 😉  

[Nancy OShea]

OK good.  As Osgood mentioned in his first reply, you don't need height, width or the OGG fallback in your markup because all modern browsers support MP4 video.  And dimensions are taken care of by the CSS.

[Sandra Dolcezza]

Thank you for the reply and support.