Search code examples
htmlcsshtml5-videosections

How do I make a background video to always extend to just above a specific section on screen resize?

I have been staring myself blind on this issue.

What I want is for the background video to always end just above the 'Options' section, whatever the screen size.

Here is my code: https://codepen.io/bassiee/pen/abLYVQw?editors=1100

I'm quite new to coding so only using HTML and CSS.

On desktop, it works. But upon screen resize, the 'Options' section will start to overlay the video. I can add media queries for it to work for a specific px screen size, but have been unable to find a solution that will work for all screen sizes.

Here's an image of what it looks like on desktop, with arrows pointing to the standard space I always want between the end of the video and the start of the options div.

as-is desktop

Upon slightly smaller screen size, this happens. It's the same for mobile.

as-is slightly smaller

HTML:

<header id="header" style="font-family: 'archivo', arial;">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;800&display=swap" rel="stylesheet">

<title id="title">Become a partner</title>

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/truck.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="#options">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="#how">How it works</a></li>
  <li class="nav__item">
            <a class="nav-link" href="#sign-up">Sign-up</a></li>
</ul>
  
</nav>

</header>

<main style="font-family: 'archivo', arial;">

<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/7471668/truck-video.png">
<source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
</video>

<h1>Title for the page</h1>
<p id="header-p">Slogan for the page</p>

<div class="benefits-div">
<figure>
<img class="benefit-img" src="https://assets.codepen.io/7471668/Real+money+icon.png" />
<figcaption>benefit 1</figcaption>
</figure>
<figure>
 <img class="benefit-img" src="https://assets.codepen.io/7471668/europe.png" />
<figcaption>benefit 2</figcaption>
</figure>
<figure>
 <img class="benefit-img" src="https://assets.codepen.io/7471668/hands.png" />
<figcaption>benefit 3</figcaption>
</figure>
</div>

<section id="options">
<div class="options-div">
<div id="regular-div">
  <h2>Option 1</h2>
  <p>One sentence summary</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>
  <form>
    <a href=""><input id="submit" type="submit" value="Sign up" /></a>
  </form>
</div>
<div id="trusted-div">
  <h2>Option 2</h2>
  <p>One sentence summary</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>
  <form>
    <a href=""><input id="submit" type="submit" value="Sign up" /></a>
  </form>
</div>
</div>
</section>

CSS:

/* background video */
#background-video {
  width: 100vw;
  height: 620px;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
 }
@media (max-width: 481px) {
#background-video { height: 900px;
 }
}

/* header */
#nav-bar {
 display: flex;
 position: fixed;
 left: 0;
 width: 100%;
 background-color: rgba(0, 0, 0, 0);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
list-style-type: none;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
width: 80px;
height: 40px;
margin-top: 6px;
margin-left: 25px;
margin-right: 0;
}
@media (max-width: 481px) {
#nav-bar { 
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
}
@media (max-width: 481px) {
#header-img { 
margin-left: 0;
}
}

/* main */
h1 {
padding-top: 120px;
text-align: center;
font-size: 40px;
color: white;
}
#header-p {
text-align: center;
color: white;
opacity: 90%;
}
.benefits-div {
display: flex;
justify-content: center;
position: static;
width: 100%;
margin-top: 8%;
}
@media (max-width: 481px) {
.benefits-div {
    flex-direction: column;    
 }
}
figure {
text-align: center;
}
.benefit-img {
width: 100px; 
margin-bottom: 5px;
}
figcaption {
font-size: 12px;
color: white;
}
.options-div {
display: flex;
justify-content: space-evenly;
width: 100%;
position: static;
margin-top: 12%;
left: 0px;
}
@media (max-width: 800px) {
.options-div {
    flex-direction: column;
    justify-content: center;
 }
}
#regular-div, #trusted-div {
border: 1px solid;
border-radius: 5px;
width: 40%;
text-align: center;
}
@media (max-width: 800px) {
#regular-div, #trusted-div {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
 }
}
#submit {
padding: 10px;
margin-bottom: 10px;
width: 60%;
color: white;
font-weight: 800;
background-color: green;
border: 0;
border-radius: 5px;
}

Update: image of issue after updating the code with the answer given:

result on mobile after code change

Solution

  • So, there are a few semantic errors in your HTML, like a title in the body element, and an anchor tag in the form tag, an input tag inside an anchor tag. You’re also using the submit ID twice.

    id’s are unique

    And as ids has higher specificity than classes, I’d highly recommend you not using ids too much.

    As for your CSS, there is so much for so little. Follow the DRY rule.

    Don't Repeat Yourself

    You're wrapping each element with a @media-query, instead just group them like so:

    @media (max-width: 481px) {
    #nav-bar {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #header-img {
        margin-left: 0;
    }
}

    Now, to understand everything a bit better, I got rid of everything related to the nav bar in your html and css as the problem is not related to those elements.

    I've also corrected a bit of your HTML semantic errors.

    I suggest you to use a HTML validator such as The W3C Markup Validator Service for your html code as it can help you correct it in case you miss some things.

    What I have come up with for:

    The background overflow problem

    1. I have added a section in your main element around the h1, the p and div.benefits
    2. I applied a display: relative to this section, so that video will always be in this section
    3. I gave it a height and width and added and overflow: hidden
    4. To the video, I gave it a height and a width of 100% so that it takes the height and width of its parent (the section)
    5. I also added object-position: center

    the div.benefits

    1. Media queries aren’t really necessary in my opinion, as flex layout is really flexible. I’d recommend you this article to read: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    2. For the children of this box, I’ve added a flex-grow: 1 and a min-width : 250px as well as a margin all around

    /*
* Always start with a reset of the basic CSS when starting to design :
* You can check here :
* https://meyerweb.com/eric/tools/css/reset
*/
body{
    margin: 0;
    padding: 0;
}
/*
* Wrapped your element that appears first in a section
* (like you did with the options)
*/
.main__section{
    position : relative;
    width: 100vw;
    height: 75vh;
    overflow: hidden;
}
#background-video {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
.benefits-div {
    display: flex;
    flex-wrap: wrap; /*allow your element to display vertically when not enough space horizontally*/
    justify-content: center;
    width: 100%;
    margin-top: 12px;
}
.options-div {
    display: flex;
    flex-wrap: wrap; /*allow your element to display vertically when not enough space horizontally*/
    justify-content: space-evenly;
    width: 100vw;
    left: 0px;
}
#regular-div, #trusted-div {
    border: 1px solid;
    border-radius: 5px;
    width: 40%;
    text-align: center;
    margin: 24px;
    flex-grow: 1;
    min-width: 250px;
}
/*
* Replaced the id by a class
*/
.submit {
    padding: 10px;
    margin: 0 auto 10px;
    display: block; /* anchors are inline elements so we change it */
    width: 60%;
    color: white;
    font-weight: 800;
    background-color: green;
    border: 0;
    border-radius: 5px;
}
/* Figure and Figcaption CSS : I Haven't touched*/
figure {
    text-align: center;
}
.benefit-img {
    width: 100px;
    margin-bottom: 5px;
}
figcaption {
    font-size: 12px;
    color: white;
}
    <main style="font-family: 'archivo', arial;">
<section class="main__section">
  <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/7471668/truck-video.png">
  <source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
  </video>
  <div class="benefits-div">
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/Real+money+icon.png" />
    <figcaption>benefit 1</figcaption>
  </figure>
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/europe.png" />
    <figcaption>benefit 2</figcaption>
  </figure>
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/hands.png" />
    <figcaption>benefit 3</figcaption>
  </figure>
  </div>
</section>

    <section id="options">
  <div class="options-div">
    <div id="regular-div">
      <h2>Option 1</h2>
      <p>One sentence summary</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>

        <a href="" class="submit">Sign Up</a>

    </div>
    <div id="trusted-div">
      <h2>Option 2</h2>
      <p>One sentence summary</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>

        <a href="" class="submit">Sign Up</a>

    </div>
  </div>
    </section>
</main>