Question

我有以下代码http://jsfiddle.net/Leytgm3L/22/，您可以在第一个“部分”中看到，我有视频背景。现在，当用户向下滚动网页时，到目前为止整个视频都会上传。我想实现网页重叠的效果，因此视频及其部分固定在页面上。我有以下CSS代码：

.video-container2 {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.video-container2 video {
    position: absolute;
    z-index: -1;
    width: 100%;
}

我尝试添加：

position: fixed

而不是绝对，但它没有做到这一点...... 我怎么能这样做？

Answer 1

position: fixed可以解决问题，但您需要将top/left/bottom/right设置为0而不是0%：

.video-container2 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

设置bottom和right后，您不再需要height和width。

jsfiddle：http://jsfiddle.net/Leytgm3L/23/

在评论中，我们讨论了视频的居中，即使是超大尺寸，并且无论屏幕的大小如何，它都会填充视口。正确实现这一目标的唯一方法是使用JavaScript。使用jQuery：

$(document).ready(function() {
    setVideoSize();
});

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

function setVideoSize() {
    // ratio of video in pixels, width/height
    var videoRatio = 320 / 176;

    // ratio of window in pixels, width/height
    var screenRatio = $(window).width() / $(window).height();

    if (videoRatio < screenRatio) {
        $('.video-container2 video').width($(window).width());
        $('.video-container2 video').height('auto');
    } else {
        $('.video-container2 video').height($(window).height());
        $('.video-container2 video').width('auto');
    }
}

为了使它居中，我们可以使用这种hacky CSS：

.video-container2 video {
  position: absolute;
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
}

jsfiddle：http://jsfiddle.net/Leytgm3L/28/

Answer 2

将您的上/左值更改为0而不是0%。

.video-container2{
    position: fixed;
    top: 0;
    left: 0;

http://jsfiddle.net/Leytgm3L/25/

我的引导页面上有视频背景 - 我怎样才能“修复”它？

2 个答案: