ビデオは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%; 
} 

このコードは単なるサンプルコードです。

キーポイントはディスプレイフレックスを使用しています。

この回答がお役に立てば幸いです。