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

我想在不影響寬高比的情況下製作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; 
}

我已經嘗試了一切。有時候，移動視圖會被切斷，文本會向上移動。

來源

2017-07-14 Abhi S

https://css-tricks.com/aspect-ratio-boxes/ –

@Abhi，我似乎無法有問題。檢查筆https://codepen.io/hunzaboy/pen/eRXNVq讓我知道你面臨什麼問題。 – Aslam

我已添加最大高度，這將有助於所有屏幕尺寸。還添加了演示文稿以顯示視頻的限制。希望這可以幫助。

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

來源

2017-07-14 05:26:38 Aslam

感謝您的幫助。問題在於它在我的本地機器上工作，但是當我將代碼移動到開發站點時，它不起作用。所以它展示了視頻的全部高度。（注意：我正在爲shopify網站創建一個自定義頁面 –

我非常喜歡你的答案，但是視頻背景的整體概念[在大屏幕上不能很好地擴展。]（https://image.ibb.co/hVfsZa /Capture.png） –

@Ihazkode，如果你看過這個問題，那麼視頻的裁剪不是問題，這就是爲什麼我給出了這個解決方案。 – Aslam

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

回答

相關問題