Question

每个人都在做什么？我在网站上遇到了麻烦。我想缩短jumbotron视频的高度。我该怎么办？这是我的代码：

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>&nbsp &nbspNew 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;
}

目前，它看起来像这样：

我试图调整视频和/或jumbotron的高度，但它会影响整个页面。

我试图了解如何使视频不是完整的浏览器高度，因为下面有一些有用的信息，网站访问者可能无法查看。最好的方法是什么？

我将不胜感激任何建议。谢谢！

Answer 1

要调整Jumbotron的高度，您可以直接使用css并使用min-height: npx;，其中n是您偏好的数字。

在你的代码上：

.jumbotron {
  background: transparent;
  margin: 24vh 0;
  overflow-y: hidden;
  bottom: auto;
  min-height: 100px;
 }

使用此属性，它将调整视频jumbotron并推送文本。

PS：在jumbotron文本类中，jumbovidtext未在CSS文件中定义，因此它可能正常工作，而不是第二个jumbotron。< / p>

调整超大屏幕视频高度

1 个答案: