如何將網格對齊到視頻播放器的高度？

Question

我這裏有一個小提琴：https://jsfiddle.net/dyrepk2x/494/

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="video-overlay"> 
     <div id="gridLayout"> 
       <div class="box1 box" slot="1">1</div> 
       <div class="box2 box" slot="2">2</div> 
       <div class="box3 box" slot="3">3</div> 
       <div class="box4 box" slot="4">4</div> 
       <div class="box5 box" slot="5">5</div> 
       <div class="box6 box" slot="6">6</div> 
       <div class="box7 box" slot="7">7</div> 
       <div class="box8 box" slot="8">8</div> 
       <div class="box9 box" slot="9">9</div> 
       <div class="box10 box" slot="10">10</div> 
       <div class="box11 box" slot="11">11</div> 
       <div class="box12 box" slot="12">12</div> 
       <div class="box13 box" slot="13">13</div> 
       <div class="box14 box" slot="14">14</div> 
       <div class="box15 box" slot="15">15</div> 
    </div> 
    </div> 
     <video id="player" controls 
    src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop></video> 
</div> 
</div> 

這裏是CSS

.outer-container { 
    border: 1px dotted black; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 
.inner-container { 
    border: 1px solid black; 
    display: inline-block; 
    position: relative; 
} 
.video-overlay { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    margin: 10px; 
    padding: 5px 5px; 
    font-size: 20px; 
    font-family: Helvetica; 
    color: #FFF; 
    background-color: rgba(50, 50, 50, 0.3); 
} 
video { 
    width: 100%; 
    height: 100%; 
} 
#gridLayout{ 
    float: left; 
    width: 100%; 
    position: fixed; 
    z-index: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    top: 0; 
} 
.box{ 
    border: 1px solid #000; 
    float: left; 
    width: 16.666%; 
    position: relative;z-index: 0; 
    height: 16.666%; 
} 

我想6x6的網格，以適應爲疊加使用CSS的視頻元素的大小，它應該是反應也是如此，我如何實現這一目標？

Answer 1

Update Code

你可以看到這個更新。你應該使用它的內邊框全寬框。像box-shadow: inset 0 0 0 1px rgb(0, 0, 0);，沒有填充，沒有餘量.video-overlay

Answer 2

扭捏#gridLayout CSS一點與.video-overlay一起後，我再調整了.box的寬度與在不同屏幕尺寸的視頻匹配，你可以看到更新FIDDLE HERE。

讓我知道，如果這是你在找什麼。