コンテナにラッパーの高さがありません

Question

アスペクト比に影響を与えずに固定高さが700pxの背景ビデオを作成しようとしています。ビデオはクロップできます。私の問題は、私が700pxの高さを提供しても、ビデオの高さ全体が表示されていることです。ここでは、コードは次のようになります。ここ

<div class="video-container"> 
    <div class="video-overlay-text"> 
    <h1>Some heading</h1> 
    <p>Sentence</p>    
    </div> 
    <video autoplay loop muted id="video-bg"> 
    <source src="homepage-video-mp4_1.mp4" type="video/mp4" /> 
    </video> 
</div> 

はCSSです：

#video-bg { 
    position: relative; 
    width: auto; 
    min-width: 100%; 
    height: auto; 
    background: transparent url(video-bg.jpg) no-repeat; 
    background-size: cover; 
} 
video { 
    display: block; 
    position: absolute; 
} 
.video-container { 
    width: 100%; 
    height: 600px; 
    overflow: hidden; 
    position: relative; 
    top: 0; 
    right: 0; 
    z-index: 0; 
}  
.video-overlay-text { 
    position: absolute; 
    z-index: 5; 
    overflow: auto; 
    bottom: 20%; 
    left: 4%; 
    max-width: 700px; 
    margin: auto; 
    display: block; 
}  
.video-overlay-text h1 { 
    color: #ffffff; 
    font-size:34px; 
    line-height: 36px; 
}  
.video-overlay-text p { 
    color: #ffffff; 
} 

私はすべてを試してみました。時々、モバイルビューがカットされ、テキストが上に移動します。

Answer 1

すべての画面サイズに役立つmax-heightを追加しました。また、ビデオの制限を示すデモテキストが追加されました。お役に立てれば。

#video-bg { 
 
    position: relative; 
 
    width: auto; 
 
    min-width: 100%; 
 
    background: transparent url(video-bg.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 

 
video { 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
.video-container { 
 
    width: 100%; 
 
    max-height: 600px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 0; 
 
} 
 

 
.video-overlay-text { 
 
    position: absolute; 
 
    z-index: 5; 
 
    overflow: auto; 
 
    bottom: 20%; 
 
    left: 4%; 
 
    max-width: 700px; 
 
    margin: auto; 
 
    display: block; 
 
} 
 

 
.video-overlay-text h1 { 
 
    color: #ffffff; 
 
    font-size: 34px; 
 
    line-height: 36px; 
 
} 
 

 
.video-overlay-text p { 
 
    color: #ffffff; 
 
}

<div class="video-container"> 
 
    <div class="video-overlay-text"> 
 
    <h1>Some heading</h1> 
 
    <p>Sentence</p> 
 
    </div> 
 
    <video autoplay loop muted id="video-bg"> 
 
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" /> 
 

 

 

 
    </video> 
 
</div> 
 

 
<h2>Hello</h2>