takeradi takeradi - 5 months ago 17
CSS Question

HTML Video does not occupy 100% width

I cant get the

video
to scale to 100% of the
width
of the
.video
container. Something like this but only such that the video occupies a
max-height
of
50vh
.

Is it possible to do that? If yes, could you please tell me how?



body {
margin: 0;
}

.container {
height: 100vh;
position: relative;
}
.container .video {
position: absolute;
height: 50vh;
width: 100%;
}
.container .video video {
position: absolute;
top: 0;
left: 0;
height: 50vh;
width: 100%;
}

<div class="container">
<div class="video">
<video muted autoplay loop>
<source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
</video>
</div>
</div>




Answer

Erase the height: 50vh; from .container .video video: (Insisting on that could only distort the proportions - makes no sense)

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 50vh;
  width: 100%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>

Comments