背景视频没有正确填满屏幕答案

【问题标题】：Background video not filling screen properly背景视频没有正确填满屏幕
【发布时间】：2015-09-10 21:09:59
【问题描述】：

我正在尝试创建一系列随页面移动的全宽、全高 HTML5 视频背景。你可以在这里看到：http://pitfarmtennis.co.uk/cms/coaching/（我希望第一个保持原样）。

但是桌面大小的屏幕上的背景不会填满宽度，并且在小屏幕中，如果滚动页面右侧会出现令人讨厌的空白。

我尝试复现错误，不太成功，但是你可以在这里查看相关代码，否则参考之前的网址：https://jsfiddle.net/beechboy707/1Lmo5dqb/

这里是关键代码：

height: 100%;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
z-index: -200;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

感谢您的帮助！

【问题讨论】：

标签： css html html5-video fullscreen

【解决方案1】：

试试这个：

    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;

此链接可能有用： http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

演示：http://thenewcode.com/samples/polina.html

【讨论】：

【解决方案2】：

感谢@Milad Nouri - 稍微修改一下就非常适合我的非位置固定需求：

position: fixed;/*From absolute*/
top: 50%;
left: 50%;
min-width: 100%;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

在容器上设置了隐藏溢出。

【讨论】：