包装容器的高度不能在容器上工作

Question

我想在不影响宽高比的情况下制作700px的固定高度的背景视频。视频可以裁剪。我的问题是，即使我提供了700像素的高度，视频的整个高度也是如此。下面是代码：

<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

我已添加最大高度，这将有助于所有屏幕尺寸。还添加了演示文稿以显示视频的限制。希望这可以帮助。

#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>