Justieren Jumbotron Video Höhe

Wie geht es allen? Ich habe Probleme auf der Website, die ich mache. Ich möchte die Höhe des Jumbotron-Videos verkürzen. Wie werde ich es tun? Dies ist mein Code:Justieren Jumbotron Video Höhe

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; 
}

Derzeit sieht es so aus:

Ich habe versucht, die Höhe des Videos einzustellen und/oder das Jumbotron, aber es bringt die ganze Seite durcheinander.

Ich habe versucht zu sehen, wie man das Video nicht volle Browserhöhe machen kann, da es einige hilfreiche Informationen gibt, unter denen sich die Besucher der Website vielleicht nicht umsehen. Was wäre der beste Weg, dies zu tun?

würde ich irgendwelche Vorschläge zu schätzen wissen. Vielen Dank!

Quelle

2016-12-15 buruguduystunstuguduystuy

Um die Jumbotron-Höhe anzupassen, können Sie direkt auf css gehen und min-height: npx; verwenden, wobei n eine Nummer Ihrer Präferenz ist.

Auf Code:

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

Mit dieser Eigenschaft wird es das Video jumbotron einstellen und den Text drücken.

P. S .: Auf der jumbotron Textklasse, die jumbovidtext nicht auf Ihrer CSS-Datei definiert ist, so ist es wahrscheinlich nur als normale div arbeiten und nicht als zweiten jumbotron.

Quelle

2016-12-16 14:14:27 Katreque

Justieren Jumbotron Video Höhe

Antwort

Verwandte Themen