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

Profile

footer text

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.

Questions & Answers