Need help adding content under a background video (Hero section)

user_18095706 0
Viewed 203

This is my first time asking a question here and in actually getting started making my own website from scratch after making a design in adobe XD. So basically I got this hero section with a background video and some text on it and I want to add content under but when I try, the content keep appearing directly in front of the video. I'm pretty sure my code is wrong and I'm sorry for not writing it well, but I want to understand so that I can get better.Also, I'm doing the website in French just to not confuse anyone. Thank you!

[The website right now][1] : https://i.stack.imgur.com/4FdTX.jpg

[What i want to do under eventually][2] : https://i.stack.imgur.com/Hp8cN.jpg

    <!--Background video-->
    <section id="hero-video">
        <video autoplay loop muted poster="/Images/cf_poster.jpg">
            <source src="Videos/slideshow.mp4" type="video/mp4">
        </video>
    </section>

<!--Start of header-->
<section class="header">
    <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
        <li><a href="">Le collège</a></li>  
          <li><a href="">Vie scolaire</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Portail</a></li>
          <li><a href="">Admission</a></li>
        </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <!--End of header-->
    <div class="hero-text">
        <h1>Un grand collège <br> laisse sa marque pour la vie</h1>
        <a href='' class="hero-btn">Visite virtuelle</a>
        </div>
</section>

<!--Section that i want to add under-->
<section class="avantages">
    <h3>Place texte here</h3>
</section>```

CSS

#hero-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.avantages {
  background: white;
  margin: auto;
  text-align: center;
  padding:1rem;
  position: relative;
}
html5-video background css html
3 Answers

The issue that you're having from what I can see, is that you have the hero-video container set to position: fixed;, which will remove the element from the normal document flow, and no space will be created for the element in the page layout. In simple terms, it would be like adding a stick-it note to the top of a painting. The stick-it note is seen, but it's not part of the painting anymore. Position fixed pretty much locks the element on the screen and will allow you to have it float.

What you should do, is have the video set to position: absolute; and be nested inside a parent container that is set to position: relative

This video series on "positioning" really helped me wrap my head around this stuff. DevTips CSS Positioning

Here is a very ruff working version of what you're looking for.

body {
  margin: 0;
}
main section {
  width:100vw;
  height:100vh;
  position:relative;
}

h1 {
  margin:0;
}

video {
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: blue;
  z-index:-1;
}

#avantages {
  background: green;
}
<header>
  <!--- header --->
</header>

<main>
  <section id="hero-video">
    <video></video>
    <h1>Content</h1>
  </section>
  <section id="avantages">
    <h1>Content</h1>
  </section>
</main>

user_175324820

In order to get the video under the text and get it all to display properly you need to be pretty good at using the position attribute and a little bit of z-index. Instead of writing you a long description I just added some notes in the CSS. Made a few changes to the HTML but nothing major.

.video-container {
  /* positions video based on ancestor */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avantages {
  background: white;
  margin: auto;
  text-align: center;
  padding: 1rem;
  position: relative;
}

.toggle-menu {
  display: none;
}

.header {
  /* header is still in the document this tell advantages section how far down to be */
  height: 100vh;
}

#logo {
  /* just for the example you can delete this */
  border: 1px solid black;
}

.header-nav {
  /* places nav based on ancestor you can use position fixed if you want the links to follow you */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* makes sure its above the video */
  z-index: 1;
  /* places logo and links side by side then centers them them spreads them to either side */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* places links side by side */
  display: flex;
}

.header-nav ul a {
  /* spaces out links */
  padding: 1rem;
}

.hero-text {
  width: 50%;
  /* positioned relative to its starting position */
  position: relative;
  /* makes sure its above the video */
  z-index: 2;
  /* moves the top left corner to the center */
  top: 50%;
  left: 50%;
  /* moves the moves the object 50% of its own height and width centering it */
  transform: translate(-50%, -50%);
  text-align: center;
  
}
<!--Background video-->



<!--Start of header-->
<header class="header">
  <video class="video-container" autoplay loop muted poster="https://via.placeholder.com/1000">
    <source src="https://www.youtube.com/embed/p6dKMZGB4PE" type="video/mp4">
  </video>
  <nav class="header-nav">
    <a href="Index.html" id="logo"><img src="https://via.placeholder.com/100"></a>
    <div class="nav_links" id="navLinks">
      <i class="fa fa-window-close" onclick="hideMenu()"></i>
      <ul>
        <li><a href="">Le collège</a></li>
        <li><a href="">Vie scolaire</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portail</a></li>
        <li><a href="">Admission</a></li>
      </ul>
    </div>
    <i class="toggle-menu fa fa-bars" onclick="showMenu()"></i>
  </nav>
  <!--End of header-->
  <div class="hero-text">
    <h1>Un grand collège <br> laisse sa marque pour la vie</h1>
    <a href='' class="hero-btn">Visite virtuelle</a>
  </div>
</header>

<!--Section that i want to add under-->
<section class="avantages">
  <h3>Place texte here</h3>
</section>

user_108407500

Put your video in figure tag and for caption use figcaption tag like so.

<figure><video autoplay loop muted poster="/Images/cf_poster.jpg">
     <source src="Videos/slideshow.mp4" type="video/mp4"></video>
<figcaption>Add video caption here</figcaption>
</figure>
user_177595460
Related