HTML5 视频背景仅响应位置 :fixed; however I don't want it to scroll with the page

Question

所以，我有这样的东西，一个体面的响应式 html5 背景:

http://codepen.io/anon/pen/yNrdpV

<style>
.video {
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
  -webkit-filter: blur(3px); //change the value according to what suits the best
    -moz-filter: blur(3px); //change the value according to what suits the best
    -o-filter: blur(3px); //change the value according to what suits the best
    -ms-filter: blur(3px); //change the value according to what suits the best
    filter: blur(3px); //change the value according to what suits the best

    overflow: hidden;
}

.margin {
  margin-top: 400px;
}

</style>
<video id="my-video" class="video" muted loop autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><!-- 
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm"> -->
</video>  
<h1 class="margin"> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1><h1> Some Content</h1><h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1><h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>
<h1> Some Content</h1>

所以，我的问题是，如果我将 position:fixed 更改为 position:absolute，它将变得无响应。但是，我不希望视频随页面滚动... 该怎么办？ 其他位置如 position:static 是一团糟。

如果您将位置从固定位置更改为固定位置，您会看到垂直滚动条出现在较小的屏幕尺寸上。

编辑: 如果您将其布局/ View 更改为“右”，则该问题仅在 codepen 上可见，因此 HTML/CSS/Java 框位于右侧，预览位于左侧(不是初始的顶部和底部布局)。诡异的。

Answer 1

与其尝试自己完成创建响应式视频元素的所有繁重工作，不如使用 FitVids.js插件来为你做这件事，它正是你需要的。