Question

我有一个背景视频，如果我将浏览器缩放到某个＆amp;高度它显示白色条，有没有办法解决这个问题？

HTML：

<video src="background/background1.mp4" preload="auto" autoplay="autoplay" loop="loop" id="background"> </video>

的CSS：

html{
width: 100%;
height: 100%;
overflow: hidden;
}

body{
    height: 100%;
    width: 100%;
    font-size: 13.5px;
    margin: 0 auto; 
    font-family: Arial, Helvetica, sans-serif;
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    font-size: 100%;
    overflow:hidden;    

}

#background{
    overflow:hidden;
    width: 100%;
    position: relative;
    min-width: 640px;
    min-height: 360px;
}

解决方案我看过：

.video-wrapper {
  position: relative;
  width : 100%;
  max-width : 100%;
  height : 0;
  padding : 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow : hidden;
}

.video-wrapper > * {
  position : absolute;
  width : 100%;
  height : 100%;
  top : -11%;
  left : 0;
  border: none;

}

上面的解决方案与我现在的代码完全相同..我可以强制浏览器始终采用16：9格式，或者使其在白条显示之前溢出，在不同的分辨率上？ / p>

Answer 1

尝试使用jquery窗口调整大小函数http://api.jquery.com/resize/

$( window ).resize(function() {
  ...
});

删除某些浏览器格式的白条 - 视频背景

1 个答案: