cup_of cup_of - 19 days ago 7
CSS Question

Background video taking full height of site instead of container

Hello I have a div with a

<video>
tag in it, and this is set as the background of the div. I have it working but when I go on to create a div below that, the video extends into that div. Basically the video extends beyond its parent container into other divs. It looks like it is taking the full height of the site instead of the full height of the div.

Here is my code:

.banner {
height: 903px;
width: 100%;
}

.banner video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video autoplay="" loop="">
<source src="//myvid.mp4" type="video/mp4">
<source src="//myvid.ogg" type="video/ogg">
</video>
</div>


Does anyone know why it is doing this?

Thanks!

Answer

change position:fixed to absolute and let the parent container be position:relative check this snippet

.banner {
  height: 200px;
  width: 100%;
  border: 1px solid green;
  position: relative;
}
.banner video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: url() no-repeat;
  background-size: cover;
}
<div class="banner">
  <video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>
</div>
<div>
  whkjshfdksjhdfksdf
</div>

Hope it helps

Comments