ブートストラップコンテンツの高さを増やす

Question

ビデオのコンテンツであるdivがありますが、問題はありません私はそれがブートストラップの通常の振る舞いだと思っていますが、デバイスが小さくなるとdivを増やす必要があります。どうすればいいのですか？ここ

を使用すると、メディアクエリを使用してそれを行うことができます

<section class="content_section white_section bg2"> 
     <div class="embed-responsive embed-responsive-16by9"> 


      <div id="video_overlays"></div> 

      <div class="container vertical-center "> 
       <div id="over"> 
        <div class="title-wrapper main_title centered upper"> 
         <h2><span class="line"></span>Simple solutions for complex problems</h2> 
        </div> 

        <div class="description4 centered"> 
         <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br> 
Usability and simple deployment are the key words.</b></p> 

        </div> 
       </div> 
      </div> 
      <div id="player" width="100%" height="100%" style="z-index:-1"> 
      </div> 
     </div> 

    </section> 

Answer 1

内のビデオとテキストのための私のhtmlです。あなたのビデオプレーヤーを持っているdivがid #playerを持っていると仮定します。以下に使用されているpxとvhの値はすべて単なる例であることに注意してください。必要に応じて設定することができます。以下の例では、小型のデバイスでは高さの高いビデオプレーヤーを使用しています。上記のコードは、画面サイズが1200px以上の幅を有するため、高さが500pxなどになることを意味し

@media screen and (min-width: 1200px) { 
#player { 
    height:500px; //or height:50vh 
} 
} 

（あなたが好きに設定することができます）

@media screen and (max-width: 1199px) and (min-width: 600px) { 
#player { 
    height:700px; //or height:70vh 
} 
} 

上記のコードは、画面サイズのためにあることを意味し、 600pxから1199pxの間の幅を持つと、高さは700pxになります。下のコードは画面解像度が600ピクセル未満の場合、ビデオプレーヤーの高さが800ピクセルになることを意味します。

@media screen and (max-width: 599px) { 
#player { 
    height:800px; //or height:80vh 
} 
} 

ここでメディアクエリについて詳しく読む： https://www.w3schools.com/css/css3_mediaqueries_ex.asp