CODEWITHSUNDEEP
htmlcss
cup_of
cup_of

Reputation: 6687

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!

Upvotes: 1

Views: 52

Answers (3)

zer00ne
zer00ne

Reputation: 43910

In addition to changes to defaults, there are changes to position of .banner (relative) and the video (absolute), and the height of the video has been modified to a percentage that maintains a 16:9 aspect ratio. To demonstrate that it covers only it's container(.banner), .banner is set at half the lengths of viewport. Please review the Snippet in Full page mode.

SNIPPET

html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.428 Verdana;
  color: #eee;
  overflow-x: hidden;
  overflow-y: auto;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
.banner {
  position: relative;
  height: 28vh;
  width: 50vw;
}
.banner video {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 56.25%;
  width: auto;
  height: auto;
  z-index: 0;
  /*background: url() no-repeat;*/
  background-size: cover;
}
<div class="banner">
  <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
  </video>
</div>

Upvotes: 1

Geeky
Geeky

Reputation: 7496

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

Upvotes: 2

cptnk
cptnk

Reputation: 2420

You have position: fixed change that to absolute. Since fixed takes the current Display scope seperated from the parent elements. Thus scrolls and takes up everything since you used widht: 100%; height: 100%;

You might also add position: relative; to the banner class so the video has it as a parent.

Upvotes: 2

Related Questions