如何将网格对齐到视频播放器的高度？

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。

让我知道，如果这是你在找什么。