Skip to main content
Sandra Dolcezza
Sandra Dolcezza
Known Participant
October 19, 2020
Answered

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

  • October 19, 2020
  • 2 replies
  • 14932 views

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 !

 

This topic has been closed for replies.
Correct answer osgood_

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

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 19, 2020

"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. 

 

Nancy O'Shea— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    October 19, 2020

    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
      Sandra DolcezzaAuthor
      Known Participant
      October 21, 2020

      Good evening osgood_

       

      This worked great !

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

       

      🙂

       

       

      O
      osgood_
      Legend
      October 19, 2020

      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
        Sandra DolcezzaAuthor
        Known Participant
        October 21, 2020

        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 !

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices