Video tag does not take parent div width and height

Question

I am trying to create a component like the one shown below with the video being played in the background.

But my video is going out of the parent div as shown below

Not sure why the video tag does not follow parent div dimensions.

Current implementation

HTML

<div class="header">
   <video
      src="somevideo.mp4"
      class="header-video"
      autoplay
      muted
      loop
      >
      Your browser does not support HTML5 video.
   </video>
</div>

###CSS

.header {
  max-height: 655px;
}

.header-video {
  width: 100%;
}

Answer 1

You need set height of the container .header

 .header { height: 120px; }.header-video { width: 100%; height: 100%; }.header { resize: both; overflow: hidden; border: 1px solid red; z-index: 1; }

 <div>text above</div> <div class="header"> <video src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4" class="header-video" autoplay muted loop > Your browser does not support HTML5 video. </video> </div> <div>resize me</div>

Or follow width or height:

 let video = document.querySelector("video"); function change(input) { video.style[input.id] = input.checked? "100%": "unset"; } change({id: "width"}); change({id: "height"});

 .header { height: 120px; width: 50vw }.header-video { }.header { resize: both; overflow: hidden; border: 1px solid red; z-index: 1; }

 <div> <label>fit width<input id="width" type="checkbox" oninput="change(this)"/></label> <label>fit height<input id="height" type="checkbox" oninput="change(this)"/></label> </div> <div class="header"> <video src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4" class="header-video" autoplay muted loop > Your browser does not support HTML5 video. </video> </div> <div>resize me</div>