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>

我正在使用bootstrap，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;
}

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

1 个答案: