ブートストラップビデオジャンボトロンの高さ

Question

私の主な目的は、ビデオが再生されるジャンボトロンを持つことです。画面の幅は100％、画面の高さは70％です。スクロールすると、ビデオをフォローしたくない現在、ページを下にスクロールすると、ビデオが続きます。これについては以下の詳細を参照してください。

体内のジャンボトロンの下に、私は垂直ナビゲーションバーを備えたnavデータスパイを使用しています。ページを下にスクロールすると、ビデオがスクロールします。どのようにその行動を止めるのですか？

コード：

<div className="jumbotron"> 
    <video className="video-background" preload="true" muted="true" autoplay="true" loop="true"> 
     <source src="example.mp4" type="video/mp4" /> 
    </video> 
    <div className="container-fluid" id="content"> 
     <h1 className="display-3">Heading Title</h1> 
     <p className="lead">Sub Text</p> 
     <a className="btn btn-primary btn-lg" href="#learnmore">Learn More</a> 
    </div> 
</div> 

CSS：

.jumbotron{ 
    position: relative; 
    z-index:-2; 
    height:62.5vh; 
} 
.video-background { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -1; 
    width:100%; 
    height: 70%; 
} 

任意の助けいただければ幸いです。私はcreate-react-appを使用しています。

ありがとうございました。

Answer 1

更新：あなたはビデオのためのclassName代わりclassの、また1つのプロパティのみを設定することができますなぜ私はわからない属性、どちらかheightまたはwidthを使用しているいくつかの理由

、ビデオニーズ以来この例では、幅を100%に設定し、高さをautoに設定した場合、ビデオは全幅に伸びます。また、ジャンボトロンのすべてのパディングを削除する必要があります。

旧：

ただ、それはそれは、したがって、あなたがスクロール効果を得ている、画面ではなく、ウェブサイトへの相対位置を固定しないものを、position:fixedを削除し、私はへのすべてのビデオにここにposition:relativeを使用していましたスクロール、異なるCSSの位置をチェックアウトhere

.jumbotron { 
 
    position: relative; 
 
    z-index: -2; 
 
    height: 62.5vh; 
 
    padding: 0px !important; 
 
} 
 

 
.video-background { 
 
    position: relative; 
 
    overflow: hidden; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div class="jumbotron"> 
 
    <video class="video-background" preload="true" muted="true" autoplay="true" loop="true"> 
 
       <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" /> 
 
      </video> 
 
    <div class="container-fluid" id="content"> 
 
    <h1 class="display-3">Heading Title</h1> 
 
    <p class="lead">Sub Text</p> 
 
    <a class="btn btn-primary btn-lg" href="#learnmore">Learn More</a> 
 
    </div> 
 
</div> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>