css - HTML 5 全屏视频在移动设备上溢出几个像素

Question

希望这个问题能得到解决!

我创建了一个带有固定全屏视频 header 的网站，它在我的显示器上运行良好，但一旦我尝试在任何较小的屏幕上查看，视频就会溢出几个像素 - 添加滚动条到屏幕底部。

我已经尝试了各种方法，但它仍然增加了额外的恼人像素!

我的视频div代码如下

video {
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background: url(../img/carousel-1.jpg) center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.header-container {
    width: 100%;
    height: 100%;
    border-left: none;
    border-right: none;
    position: relative;
}
.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: url(../img/carousel-1.jpg) center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
 @media(max-width:1024px) {
#buttonbar {
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    z-index: 20;
    color: rgba(0,0,0,1.00);
    text-align: center;
}
}
#play {
    border: none;
    height: 102px;
    width: 204px;
    text-decoration: none;
    background: url(../img/play-pause.png) center center no-repeat scroll;
    opacity: .8;
}
#play:focus {
    opacity: .5;
    text-decoration: none;
}
#play:active {
}
#pause {
    background: url(../img/vid-play.png) center center no-repeat scroll;
    height: 100px;
    width: 100px;
}
 @media(max-width:767px) {
.hidden-767 {
    display: none;
}
}

这是测试网站 http://www.lightcorp93.com/test/index.html

谢谢你的帮助

Answer 1

尝试 right:0 并删除 min-width。