CODEWITHSUNDEEP
htmlcss
Harsh Nagalla
Harsh Nagalla

Reputation: 1245

Video tag does not take parent div width and height

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

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 1923

Answers (1)

vanowm
vanowm

Reputation: 10201

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>

Upvotes: 2

Related Questions