CODEWITHSUNDEEP
htmlcss
Artyom
Artyom

Reputation: 391

Overlay bigger than video under it

I'm trying to put a video under a purple layer but my video doesn't fit the overlay correctly.

enter image description here

Or if I delete this background-size: cover; in home section looks like this:

enter image description here

.videoContainer {}

.videoContainer .overlay { /* ? */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: .5;
}

.videoContainer video {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.home-section {
  // background-size: cover;
  background-repeat: no-repeat;
  background-image: url('?');
  z-index: 9999;
}
<div class="home-section section">
  <div class="videoContainer">
    <video autoplay loop muted>
      <source src="?" type="video/mp4">
    </video>
  </div>
</div>
Edited: added source code link:

Download source code

Upvotes: 0

Views: 645

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

Based on the source code you linked to, here are CSS changes that I think will do what you are trying to achieve.

The two issues I see with your current approach are that you are not stretching the video to fill .home-section, and neither are you stretching .home-section's background image (the overlay) to fill .home-section.

.home-section {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../res/bg_color_home.png);
    /* make sure to remove the z-index declaration */
}
.videoContainer {
    /* make video container fill its parent: */
    position: absolute;
    width: 100%;
    height: 100%;
    /* move it below .home-section: */
    z-index: -1;
}
.videoContainer video {
    /* make the video fill its parent: */
    width: 100%;
    height: 100%;
    /* and retain its aspect ratio: */
    object-fit: cover;
}

Please note that the method of stretching the video to fill its container (object-fit) may not work in all browsers, and depending on the level of browser support you wish to provide, you may want to use a different method for scaling the video. I have used it because it is quick and easy.

Upvotes: 1

Related Questions