menu

Questions & Answers

Video background homepage not responsive to different screen resolutions. CSS media queries not working

The homepage of the website I am working on has a video background with text overlay but it's not responsive to different screen resolutions. I have tried using CSS media queries but it's still not perfect.

Issue: I have tried using CSS queries and the video and is not responsive on mobile devices, yes it plays but, it doesn't cover the screen entire section of screen, which i find weird. Below is my html and CSS code of the homepage section.

HTML and CSS Code:

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .container {
  position: relative;
  padding-top: 74px;
  text-align: center;
}

#hero h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 64px;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

#hero h1 span {
  color: #ffc451;
}

#hero h2 {
  color: rgba(255, 255, 255, 0.9);
  margin: 10px 0 0 0;
  font-size: 24px;
}

#hero .icon-box {
  padding: 30px 20px;
  transition: ease-in-out 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
  text-align: center;
}

#hero .icon-box i {
  font-size: 32px;
  line-height: 1;
  color: #ffc451;
}

#hero .icon-box h3 {
  font-weight: 700;
  margin: 10px 0 0 0;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  line-height: 26px;
}

#hero .icon-box h3 a {
  color: #fff;
  transition: ease-in-out 0.3s;
}

#hero .icon-box h3 a:hover {
  color: #ffc451;
}

#hero .icon-box:hover {
  border-color: #ffc451;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 769px) {
  #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 145%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  #hero {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 360px) {
  #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 145%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  #hero {
    height: auto;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 20px;
    line-height: 24px;
  }
}
<div class="container" data-aos="fade-up">

  <video id="background-video" autoplay loop muted>
    <!--
    <source
      src="assets/img/herovid.mp4" type="video/mp4">
    -->
    <source
      src="https://www.w3schools.com/tags/movie.mp4"
      type="video/mp4">
  </video>
  
  <div
    class="row justify-content-center" data-aos="fade-up" data-aos-delay="150">
    <div class="col-xl-6 col-lg-8">
      <h1>WELCOME HOME
        <span>.</span>
      </h1>
    </div>
  </div>

  <div
    class="row gy-4 mt-5 justify-content-center"
    data-aos="zoom-in" data-aos-delay="250">
    
    <div class="col-xl-2 col-md-4">
      <div class="icon-box">
        <i class="bi bi-person-bounding-box"></i>
        <h3><a href="#services">RECRUITMENT & PLACEMENT </a></h3>
      </div>
    </div>
    <div class="col-xl-2 col-md-4">
      <div class="icon-box">
        <i class="bx bx-world"></i>
        <h3><a href="#services">TALENT MAPPING</a></h3>
      </div>
    </div>
    <div class="col-xl-2 col-md-4">
      <div class="icon-box">
        <i class="bx bx-tachometer"></i>
        <h3><a href="#services">ONBOARDING OPTIMISATION</a></h3>
      </div>
    </div>
    <div class="col-xl-2 col-md-4">
      <div class="icon-box">
        <i class="bi bi-airplane"></i>
        <h3><a href="#services">3RD PARTY EXIT INTERVIEWS</a></h3>
      </div>
    </div>
    <div class="col-xl-2 col-md-4">
      <div class="icon-box">
        <h3><a href="#services">SEE MORE OF OUR SERVICES</a></h3>
      </div>
    </div>

  </div>

</div>

Comments:
2023-01-22 00:20:08
Could you clarify exactly what you want the video to do - is it to cover the whole viewport regardless of aspect-ratio difference (i.e. either shrink or expand as required and get cropped either top/bottom or at the sides if required)?
2023-01-22 00:20:08
@Mukgadi to make things more clear, I commented your original video source and added a new one from w3school with a video actually streaming. Anyway the aspect ratio will make the difference in terms of how you are expected to display that box compared to the viewport size. So I also think you should explain your expectations better
2023-01-22 00:20:08
@DiegoD Hi there, so the site that i am working on is live: www.jonianmconsulting.com. As i test it out on different mobile devices with different aspect ratios, the homepage video gets cropped at the bottom and doesn't fill the homepage section. I don't know why this is happening as the text overlay is responsive but the video in a sense is not. I hope i am making sense...I would appreciate your assistance as i have been struggling with correcting this for weeks. Thank you
2023-01-22 00:20:08
@AHaworth so the site that i am working on is live: www.jonianmconsulting.com. As i test it out on different mobile devices with different aspect ratios, the homepage video gets cropped at the bottom and doesn't fill the homepage section. I don't know why this is happening as the text overlay is responsive but the video in a sense is not. I would appreciate your assistance as i have been struggling with correcting this for weeks. Thank you
2023-01-22 00:20:08
I tried the site on a real iPhone - the video does not run. It runs, and goes to the bottom, on the browser's emulator.
Answers(1) :

Minimal example with text on background video:

body{
    padding:0px;
    margin:0px;
    font-family:Arial;
}
  
#container-top{
    width:100%;
    height:100vh;
    position:relative;
    display:block;
    overflow:hidden;
}
    
#background-video {
    position: absolute;
    box-sizing:border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    object-fit: cover;
    object-position: center;
}

#some-text {
    position: absolute;
    padding:30px;
    background:#00000088;
    color:#fff;
    box-sizing:border-box;
    top: 50%;
    left: 50%;
    transform:translateX(-50%) translateY(-50%);
}

#more-text {
 clear:both;
 padding:40px;
}
<div id="container-top">
    <video id="background-video" autoplay loop muted>
        <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    
    <div id="some-text">
        <b>Lorem Ipsum 2</b><hr>
        <p>
          is simply dummy text of the printing and typesetting 
          industry.
        </p>        
    </div>
</div>

<div id="more-text">
    <h1>Lorem Ipsum 2</h1>
    <p>
      is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the.
    </p>        
</div>

Comments:
2023-01-22 00:20:08
Just did that now, the video still gets cropped at the bottom of the homepage section and the text overlay and icon boxes that i have used at the bottom are not entirely visible.
2023-01-22 00:20:08
I changed post example to minimal with video in background and some text over it.