「ヒーロー」セクションの後にコンテンツを追加する

Question

ホームページの1つのセクションにフルスクリーンの背景ビデオとイントロテキストを配置しました。今度は、ホームページの下部にコンテンツを追加したいが、何かが完全に台無しになっている。あなたは、私がここで何を意味するか見ることができます：私は、ビデオの下に新しいセクションとして追加する新しいコンテンツの周りに赤い丸を作った

。なんらかの理由でページの上部に詰まっています。

<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> 

そして、ここでCSSです：

これは、HTMLがどのように見えるかです

    /*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; 
         } 
        } 

あなたはデモページhereを見ることができます。このウェブサイトを構築し続けることができるように、この問題で私を助けてください。ありがとうございました。

EDIT：これそれはのようになります方法です。

Answer 1

私はあなたが達成しようとしているものだと思うが、次のようにフルスクリーンセクションのクラスを設定することによって行うことができます。

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

上記のように、fullscreen-bgセクションは常にブラウザの全体像をとるため固定されてはならず、追加された他のコンテンツは常にその背後に表示されます。

これを行うには、min-aspect-ratio：16/9のメディアクエリでfullscreen-bg__videoクラスの高さを削除する必要があります。

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

私はこれが何を探しているのだろうと思います。

これが役に立ちます。

[編集]

マージントップを追加してください：100pxに（または任意のスーツ）をフルスクリーン-BGセクションに上に固定されているナビゲーションバーを補償します。これは、スクリーンの高さがより大きい場合、最初のセクションの背後にあるセクションマージンの問題を修正します。側のビデオ白い領域をカバーするために

は、次の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); 
} 

を追加します。whatwedoセクションの上マージンを設定する最良の方法は、document.readyと、ウィンドウ上のjQueryを使用することです.resizeメソッドを追加するには、navbar height + fullscreen-bgセクションの高さを追加し、その値をwhatwedoセクションの上マージンとして設定します。これにより、画面サイズに応じて応答性が向上し、調整されます。