• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS 3D video background based on scroll (HTML, CSS & JS)

Hello everyone,
I created a page for my site with a 3D video in the background that playing when you scroll. The problem is that I can't do anything else, this video persists in the background. I would like to have section 0 at the top with another background, something completely different. then section 1 with the scrolling, the video etc. then section 2 with something else as well. but I can't do it, this video remains in the background and when I try to put things before or after it, it messes up everything...I think there is nothing complicated but I can't find the solution, I don't know if it's an html problem or in my js script or CSS organization.

HTML:
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offres</title>
    <link rel="stylesheet" href="/pages/Offres.css">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/811bffdae6.js" crossorigin="anonymous"></script>
    
    <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=Poppins&display=swap" rel="stylesheet">
  </head>   
  <body>
  <!-- Section 0 - nos offres -->
        <div class="container2">
        </div>

  <!-- Section 1 - étude de marché -->
    <section class="container">
      <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Pourquoi faire une étude de marché ?</h2>
        <p>blablabla</p>
      </div>
    </section>

      <section class="container">
        <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Et si nous prenions de la hauteur ensemble ?</h2>
        <p>blablabla</p>
        </div>
      </section>

      <section class="container">
        <div class="content">
          <h1>Comment cela va se dérouler ? </h1>
          <p> contactez-nous et discutons de votre projet ! cela nous permettra de bien cimprendre l'objectif de cette etude de marché (est-ee que c'est vraiment utile ?).
             Nous verrrons ensuite, aprés quelques recherches préliminaires, si il y a un marché (nous ne vous ferons pas payé une étude "dans le vent") </p>
          <img src="/ressources/logo provisoire.png" alt="">
          <button> Contactez-nous</button>
        </div>
      </section> 
        
          <div id="set-height"></div>

      <video id="v0" tabindex="0", autobuffer preload>

        <source type="video/mp4" src="/ressources/VIDEO/Market study.mp4"></source>
      </video>

      
      <script src="/pages/sticky.js"></script>
      
    <script>

      enterView({
        selector: "section",
        enter: function(el) {
          el.classList.add("entered");
        }
      })
    
        var frameNumber = 0, // start video at frame 0
        // lower numbers = faster playback
        playbackConst = 1000,
        // get page height from video duration
        setHeight = document.getElementById("set-height"),
        // select video element         
        vid = document.getElementById('v0');
        // var vid = $('#v0')[0]; // jquery option

    // dynamically set the page height according to video length
    vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
    });


    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){ 
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }

    window.requestAnimationFrame(scrollPlay);

        </script>
  <!-- Section 2 - prévi -->

      
    <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Qu'est ce qu'un prévisionnel financié ?</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Pourquoi faire un prévisionnel financié ? ?</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Comment cela va se dérouler</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Avec Kibyon, gardez un oeil sur l'avenir</h2>
          <button> Contactez-nous</button>
        </div>
      </section>


</body>
</html>


CSS:
body{
    font-family: "poppins", sans-serif;
    background-color: black;
    margin: 0;
    padding: 0;
}

/* Section 0 */
.container2{
    width: 100%;
    height: 100vh;
    background-image: white, url(/ressources/sharon-pittaway-N7FtpkC_P7o-unsplash.jpg);
    background-position: center;
    background-size: cover;
}

/* Section 0 fin */

#v0{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

#set-height{
    display: block;
}

.container{
    z-index: 1;
    position: sticky;
    padding: 3em;
    top: 0px;

}

.content{
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 33,3%;
    color: white;
}

.content h1 {
    font-size: 3em;
    background: black;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    margin: 0;

}

p {
font-size: 1.5em;
}

section:nth-of-type(1) {
    height: 2200px;
}

section:nth-of-type(2) {
    height: 1300px;
}

section:nth-of-type(3) {
    height: 800px;
}

/* à suivre la mise en forme de l'apparition du texte */

.entered {
        -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-8-3 17:12:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

  .content button{
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: inherit;
    color: white;
    border: 1px solid white;
  }
  .content button:hover {
    background-color: white;
    transition: background-color 0.5s;
    border: 1px solid white;
    color: #0163ac;
    font-weight: bold;
 }

  /* Section previ fi */

  .previ{
    background-image: linear-gradient(to right top, #2c71f6, #0d6fe4, #006cd2, #0068bf, #0163ac, #0162acca,#0162ac8e, #0162ac48, black);
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .previ #text{
    position: absolute;
    color: white;
    font-size: 2vw;
    text-align: center;
    line-height: 0,55em;
  }

  .previ #text span{
    font-size: 3vw;
    letter-spacing: 2px;
    font-weight: 400;
  }



JavaScript:
"use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});

Thank you very much for your time and for reading me !
 
Top