title: Adjust Jumbotron Video Height
body: <p>How is everyone doing? I'm having a trouble on the website that I'm making. I want to shorten the height of the jumbotron video. How will I do it? This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;nav&gt;&lt;/nav&gt;    
      .....
      &lt;!--Jumbotron--&gt;
      &lt;div class="jumbotron"&gt;
          &lt;!--Jumbotron Video--&gt;
          &lt;video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted"&gt;
              &lt;source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg"&gt;
          &lt;/video&gt;
          &lt;!--Jumbotron Video Text--&gt;
          &lt;div class="center jumbovidtext text-center"&gt;
              &lt;!--Wrapper of the article--&gt;
              &lt;article&gt;
                  &lt;h2 class="txtjumbo"&gt;Welcome to&lt;/h2&gt;
                  &lt;h1 class="txtjumbo" id="bigone"&gt;St. Augustine Pediatrics Associates&lt;/h1&gt;
                  &lt;p class="txtjumbo"&gt;Our physicians and our staff strive to keep the personal approach of small-town care you had as a child. We understand the struggles of busy life. We care about the overall health and well-being of our patients and their families.&lt;/p&gt;
                  &lt;button type="button" class="btn btn-danger btn-lg"&gt;
                      &lt;span class="glyphicon glyphicon-file" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbsp &amp;nbspNew Patient Registration
                  &lt;/button&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;button class=glyph-down-button&gt;&lt;span class="glyphicon glyphicon-circle-arrow-down"  font-size: "100em"aria-hidden="true" href="#" opacity=.80&gt;    &lt;/span&gt;&lt;/button&gt;
              &lt;/article&gt; &lt;!--End of Article--&gt;
          &lt;/div&gt; &lt;!--End of Jumbo Vid Text--&gt;
      &lt;/div&gt; &lt;!--End of Jumbotron--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 60px;
  }
  
  .jumbotron {
    background: transparent;
    margin: 24vh 0;
    overflow-y: hidden;
    bottom: auto;
   }
  
  #txtjumbo{/*This feels useless*/
    background-color: transparent;
    z-index: 2;
  }
  
  article{
    background: #ffffff;
    opacity: .75;
    z-index: 1;
  }
  
  #bg-video {
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: -1;
    width: 100%;
    opacity: 0.80;
    background: transparent;
  }
  
  .glyph-down-button{
    background: transparent;
    border: none;
  }
  
  .glyphicon.glyphicon-circle-arrow-down {
      font-size: 30px;
  }
  </code></pre>
  
  <p>Currently, it looks like this:
  <a href="https://i.stack.imgur.com/2iQJg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2iQJg.png" alt="top"></a>
  <a href="https://i.stack.imgur.com/Jxz1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jxz1n.png" alt="bottom"></a></p>
  
  <p>I tried to adjust the height of the video and/or the jumbotron, but it messes the whole page up.</p>
  
  <p>I was trying to see how to make the video not full browser height as there are some helpful information below which site visitors might not bother to look. What would be the best way to do this?</p>
  
  <p><a href="https://i.stack.imgur.com/Hxlww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hxlww.png" alt="solution"></a></p>
  
  <p>I would appreciate any suggestions. Thanks!</p>