在保持縱橫比的情況下縮放視頻以適應Flexbox項目

Question

我正在嘗試使用flexbox來佈置我的網站。該網站在屏幕上方有一個視頻，下方有一個可滾動的div。每個彈性項目應使用屏幕高度的50％。

當屏幕被調整大小時，視頻應該保持寬高比。寬度不應超過屏幕寬度，高度不應超過屏幕高度的50％。

眼下當屏幕是窄的視頻正確地縮放以適應寬度：

當屏幕是加寬視頻的高度延伸超過母體div的高度和控制顯示在可滾動的div上述。

如何確保視頻永遠不會超過flex-item的高度或寬度，同時保持縱橫比？我要求的一個要求是我必須將視頻元素嵌套在flex-item中（我不能將視頻元素用作flex-item）。另外，理想情況下，視頻應垂直和水平居中。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
video { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.flex-container { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.flex-item { 
 
    padding: 1em; 
 
    width: 100%; 
 
    flex-basis: 50%; 
 
} 
 
.video-content { 
 
    background-color: #ccffcc; 
 
} 
 
.scrollable-content { 
 
    overflow-y: auto; 
 
    background-color: #ffcccc; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="flex-container"> 
 
    <div class="flex-item video-content"> 
 
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video> 
 
    </div> 
 
    <div class="flex-item scrollable-content"> 
 
    Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    <br>Scroll content 
 
    </div> 
 
</div>

Answer 1

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="flex-container"> 
    <div class="flex-item video-content"> 
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video> 
    </div> 
    <div class="flex-item scrollable-content"> 
    <h1>Scroll content</h1> 
    <p>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
    <br>Scroll content 
     <br>Scroll content</p> 
    </div> 
</div> 

CSS

html, 
body { 
    height: 100vh; 
} 
video { 
    flex:0 1 100%; 
    object-fit: fill; /* over-ride "object-fit: contain" only for webkit as it doesn't honour the ratio */ 
} 
.flex-container { 
    height: 100vh; 
    display: flex; 
    flex-direction:column; 
    justify-content:flex-start; 
} 
.flex-item { 
    padding: 1em; 
    box-sizing:border-box; 
    height:auto; 
} 
.video-content { 
    background-color: #ccffcc; 
    flex:0 1 100%; 
    height:50%; 
    display:flex; 
    justify-content:flex-start; 
} 
.scrollable-content { 
    flex:0 0 100%; 
    overflow-y: scroll; 
    min-height:50vh; 
    background-color: #ffcccc; 
} 

http://codepen.io/anon/pen/wMrYOK

https://css-tricks.com/almanac/properties/o/object-fit/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我發現我工作的解決方案。我加position: relative;到.video-content作出video絕對定位，100％的高度和寬度：

video { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

https://jsfiddle.net/beeps10/0hxze25p/

Answer 3

好了，所以第一，你有它100％的柔性性質，窗口的變化所以每當大小彈性容器和視頻將縮放到該窗口的容量。

我相信，如果你從bootstrap4

適用的輔助類（這裏是CDN：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css）這應該可以解決這個問題。這個類添加到視頻的容器：

類=「嵌入響應嵌入響應-16by9」

而到了視頻標籤添加這個類：

類=「嵌入-responsive-項目」

應該是這樣的：

 <div class="flex-item video-content embed-responsive embed-responsive-16by9"> 
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" class ="embed-responsive-item" controls></video> 

希望對你有用:)