0
どのようにしていますか？私が作っているウェブサイトに問題があります。私はジャンボトロンビデオの高さを短くしたい。私はどうしますか？これは私のコードです：ジャンボトロンのビデオの高さを調整する
HTML
<body>
<nav></nav>
.....
<!--Jumbotron-->
<div class="jumbotron">
<!--Jumbotron Video-->
<video id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg">
</video>
<!--Jumbotron Video Text-->
<div class="center jumbovidtext text-center">
<!--Wrapper of the article-->
<article>
<h2 class="txtjumbo">Welcome to</h2>
<h1 class="txtjumbo" id="bigone">St. Augustine Pediatrics Associates</h1>
<p class="txtjumbo">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.</p>
<button type="button" class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>   New Patient Registration
</button>
<br><br>
<button class=glyph-down-button><span class="glyphicon glyphicon-circle-arrow-down" font-size: "100em"aria-hidden="true" href="#" opacity=.80> </span></button>
</article> <!--End of Article-->
</div> <!--End of Jumbo Vid Text-->
</div> <!--End of Jumbotron-->
</body>
CSS
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;
}
は現在、それは次のようになります。 
私は、ビデオの高さを調整しようとしましたが、 /またはジャンボトロンが、それはページ全体を台無しにする。
私は、サイトの訪問者が見苦しくないかもしれないいくつかの有益な情報があるので、ビデオを完全なブラウザの高さにする方法を見ようとしていました。これを行う最善の方法は何でしょうか？
私は、任意の提案をいただければ幸いです。ありがとう！