Hinzufügen von Inhalt nach "Held" Abschnitt

Question

Ich habe ein Fullscreen-Hintergrund-Video und einige Intro-Text in einen Abschnitt einer Homepage platziert. Jetzt möchte ich weiterhin Inhalte in den unteren Teil der Homepage einfügen, aber etwas ist völlig durcheinander. Sie können sehen, was ich meine hier:

ich einen roten Kreis um den neuen Inhalt gemacht habe, den ich als einen neuen Abschnitt unter dem Video hinzufügen möchten. Aus irgendeinem Grund bleibt es oben auf der Seite hängen. Diese

ist, wie die HTML aussieht:

<section id="fullscreen-bg"> 
     <video loop muted autoplay poster="img/landing_bg.jpg" class="fullscreen-bg__video"> 
      <source src="video/big_buck_bunny.webm" type="video/webm"> 
      <source src="img/demo.mp4" type="video/mp4"> 
      <source src="video/big_buck_bunny.ogv" type="video/ogg"> 
     </video> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <h1>dolm it</h1> 
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p> 
        <button type="button" class="btn btn-default white">more</button> 
       </div> 
      </div> 
     </div> 
     <!--end container--> 
    </section> 
    <!--end fullscreen-bg--> 


    <section id="whatwedo"> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 

        <h1>what we do</h1> 
        <p>We offer a wide range of software development and design options from a simple web development to more complicated information systems. We ensure our customers get the right thing, done the right way.</p> 
       </div> 
      </div> 
     </div> 
    </section> 

Und hier ist der CSS:

    /*fullscreen bg*/ 

        #fullscreen-bg h1 { 
         color: #ffffff; 
         font-family: 'Akrobat-ExtraBold'; 
         font-size: 4.9rem; 
         text-transform: uppercase; 
         letter-spacing: 2px; 
         margin-bottom: 32px; 
        } 

        #fullscreen-bg p { 
         color: #ffffff; 
         font-family: 'Akrobat-Bold'; 
         font-size: 1.5rem; 
        } 

        #fullscreen-bg .col-md-6 { 
         margin-top: 200px; 
         padding: 130px 0 130px 0; 
         display: -webkit-box; 
         display: -ms-flexbox; 
         display: flex; 
         -webkit-box-align: flex-start; 
         -ms-flex-align: flex-start; 
         align-items: flex-start; 
         -webkit-box-orient: vertical; 
         -webkit-box-direction: reverse; 
         -ms-flex-direction: column; 
         flex-direction: column; 
         z-index: 10; 
        } 
        /*video bg*/ 

        #fullscreen-bg { 
         position: fixed; 
         top: 0; 
         right: 0; 
         bottom: 0; 
         left: 0; 
         overflow: hidden; 
         z-index: -100; 
        } 

        .fullscreen-bg__video { 
         position: absolute; 
         top: 0; 
         left: 0; 
         width: 100%; 
         height: 100%; 
        } 

        #fullscreen-bg:before { 
         content: ''; 
         background: rgba(14, 124, 132, 0.8); 
         width: 100%; 
         height: 100%; 
         position: absolute; 
         left: 0; 
         top: 0; 
         z-index: 1; 
        } 

        @media (min-aspect-ratio: 16/9) { 
         .fullscreen-bg__video { 
          width: 100%; 
          height: auto; 
         } 
        } 

        @media (max-aspect-ratio: 16/9) { 
         .fullscreen-bg__video { 
          width: auto; 
          height: 100%; 
         } 
        } 

        @media (max-width: 767px) { 
         #fullscreen-bg { 
          url(../img/landing_bg.jpg) no-repeat 0 30% fixed; 
         } 
         .fullscreen-bg__video { 
          display: none; 
         } 
        } 

Sie können die Demo-Seite here sehen. Bitte helfen Sie mir bei diesem Problem, damit ich diese Website weiter aufbauen kann. Vielen Dank.

EDIT: Dies ist, wie es aussehen soll:

Answer 1

Ich denke, was Sie, indem Sie die Vollbild-Sektion Klasse kann getan werden, um zu erreichen versuchen, wie folgt:

#fullscreen-bg { 
    overflow: hidden; 
    z-index: -100; 
} 

Wie oben gezeigt, sollte die Fullscreen-bg-Sektion keine feste Position sein, da sie immer die gesamte Ansicht des Browsers einnimmt und alle anderen hinzugefügten Inhalte immer dahinter angezeigt werden.

Jetzt, um das gewünschte Aussehen zu erreichen, entfernen Sie die Höhe: Auto aus der Fullscreen-bg__videoklasse in der Medienabfrage für min-Aspekt-Verhältnis: 16/9.

@media (min-aspect-ratio: 16/9) 
.fullscreen-bg__video { 
width: 100%; 
} 

Ich denke, das wird tun, was Sie suchen.

Hoffe, das hilft.

[Bearbeiten]

Bitte fügen Sie margin-top: 100px (oder was auch immer Anzüge) mit dem Vollbild-bg Abschnitt für die navbar zu kompensieren, die auf der Oberseite befestigt ist. Dies wird das Problem beheben, was wir tun, um hinter den ersten Abschnitt zu kommen, wenn die Bildschirmhöhe größer ist.

die Video-weißen Bereiche abzudecken auf der Seite die folgenden CSS

@media (min-aspect-ratio: 16/9) 
.fullscreen-bg__video { 
    width: 100%; 
    -webkit-transform: scaleX(1.2); 
    -moz-transform: scaleX(1.2); 
    -ms-transform: scaleX(1.2); 
} 

So wie für Informationen hinzufügen: Der besten Ansatz, der obere Rand des whatwedo Abschnitts Einstellung ist jQuery auf document.ready und Fenster zu verwenden .resize-Methoden, indem Sie die Höhe der navbar-Höhe + fullscreen-bg hinzufügen und diesen Wert als oberen Rand für den Abschnitt whatwedo festlegen. Dadurch wird es vollständig reaktionsfähig und passt sich an die Bildschirmgröße an.