CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 59

Make video same width and height cropped as the div it is inside

Hi to make a video responsive and to fit within my design layout, I am trying to get a video to fit within a div and to crop around the size of the div it is inside. Currently, the video overflows and the height and width cannot be adjusted unless it is evenly scaled. I thought it would be best if the div containing the video would be better to adjust height and width and let the video cover the size of this div with overflow hidden. So in this example, the video is inside the container but does not fill to the top and the bottom. Please advise me of how you would do this?

    <div class="video-container col-md-12">
        <video autoplay muted loop id="myVideo">
          <source src="./img/gordon.mp4" type="video/mp4">
        </video>
    </div>


.video-container {
    width: 40vw!important;
    height: 81vh!important;
    position: absolute;
    top: 9.5vh;
    left: 10vw;
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
}

.video-container video {
    height: 100%;
}

Upvotes: 0

Views: 1474

Answers (1)

passatgt
passatgt

Reputation: 4432

You could use object-fit: cover;. Browser support is pretty good: https://caniuse.com/#feat=object-fit

.video-container {
  height:100vh;
}

video {
  width:100%;
  height:100%;
  object-fit: cover;
  background:black;
}
<div class="video-container">
  <video src="https://giant.gfycat.com/FeminineHairyBufeo.mp4" autoplay loop></video>
</div>

Upvotes: 1

Related Questions