你如何製作視頻佔據其餘的div？

Question

我需要一個視頻來佔據整個div的空間。它顯示控件有，但縮略圖沒有。任何人都有一些建議，或者有人能指引我走向正確的方向嗎？

http://puu.sh/x6cUl/1b77983418.jpg

<div class="row videoRow hidden-sm-down"> 
    <div class="col-8"> 
      <video class="bigVideo" src="Myvid.m4a" allowfullscreen controls></video> 
     </div> 
     <div class="col-4"> 
      <div class="col-md-12 col-sm-6" style="margin-bottom: 2vw;"> 
       <video class="smallVideo" src="Myvid2.m4a" allowfullscreen controls></video> 
      </div> 
      <div class="col-md-12 col-sm-6" style="margin-top: 1vw;"> 
       <iframe class="smallVideo" src="Myvid3.m4a" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
</div> 

和這裏是CSS

.front-page .videoRow { 
    padding: 20px; 
} 
.front-page .bigVideo, .front-page .smallVideo { 
    border: black 2px solid; 
} 
.front-page .bigvideomobile { 
    display: block; 
    margin: auto 
} 
.front-page .bigVideo { 
    width: 60vw; 
    height: 30vw; 
} 
.front-page .smallVideo { 
    width: 30vw; 
    height: 14vw; 
} 

Answer 1

HTML例

<div class="container"> 
    <div class="left-container"> 
    <!-- Large Moive --> 
    <video class="bigVideo" src="Myvid.m4a" allowfullscreen controls></video> 
    </div> 
    <div class="right-container"> 
    <!-- Small Moive 1 --> 

    <!-- Small Moive 2 --> 
    </div> 
</div> 

CSS實施例

.container{ 
    display: flex; 
    flex-direction: row; 
    width: 800px; 
    height: 300px; 
    border: 2px solid black; 
    align-items:center; 
    justify-content: space-around; 
} 
.left-container{ 
    width: 500px; 
    height: 280px; 
    border: 2px solid black; 
} 
.right-container{ 
    width: 280px; 
    height:280px; 
    border: 2px solid black; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

video{ 
    width: 100%; 
    height: 100%; 
} 

這個代碼只是示例代碼。

關鍵點是使用顯示器彎曲。

我希望這個答案能幫助你。