背景视频无法正确填满屏幕

Question

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

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

我试过重现错误，不太成功，但是你可以在这里看到相关代码，否则参考前面的URL：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;

感谢您的帮助！

Answer 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;

这个link可能有用： http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

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

Answer 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;

在容器上设置隐藏溢出。

背景视频无法正确填满屏幕

Background video not filling screen properly

css

html

html5-video

fullscreen