如何确保HTML视频充满响应网页的屏幕

Question

我如何设置CSS（或其他），以确保我正在处理的视频填充屏幕，包括100%宽度和100%（减去导航栏的固定高度）。不要介意它是如何工作的，即视频上方和外部的黑条，或者剪掉视频的侧面或顶部。

到目前为止，这就是我所得到的：

<div class="row content">
  <video autoplay loop muted poster="screenshot.jpg" id="background">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </source>
  </video>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">Title</h1>
      </div>
    </div>
    <hr>
  </div>
</div>

我正在使用引导程序、CSS和HTML。

这是一个JSFiddle。它并没有很好地显示问题，因为窗口按比例调整大小，但希望会有所帮助。

Answer 1

你可以把它放在一个黑色背景的绝对位置的盒子里，让它充满屏幕。根据菜单高度调整顶部。

http://jsfiddle.net/1jz80dws/

HTML

 <div class="fill">
    <video autoplay loop muted poster="screenshot.jpg" id="background">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      </source>
    </video>
</div>

CSS

.fill {
    position: absolute;
    background-color: #000;
    top:70px;
    right:0;
    bottom:0;
    left:0;
}