具有页眉和页脚引导网格的响应式视频播放器

Question

我正在尝试让我的视频播放网站看起来像这样。 （两侧和顶部/底部不应有填充）它完全填满屏幕宽度，并完全填满页眉和页脚。

我的两侧和底部都有一些奇怪的填充物。高度正在推倒页脚。

我目前的css / html

<div class="container">
  <div class="row" >
    <div class="header col-xs-12">
      <h1>Hello</h1>
    </div>
  </div>
  <div class="row video-container">
    <div class="col-xs-12">
      <video autoplay loop="true">
        <source src="assets/videos/mov_bbb.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="row">
      <div class="footer col-xs-12">
        <h2>Test</h2>
      </div>
    </div>
  </div>

的CSS

.container{
    width:100%;
}
video{
    width: 100%;
    height: auto;
}
.header, .footer{
    background-color: #3FBCA3;
}

.padding-0{
    padding-right:0;
    padding-left:0;
}

我在Angular 2编码，并使用bootstrap响应网格系统