javascript - 我的 Bootstrap 页面上有一个视频背景——我怎样才能把它变成 "fixed"？

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/

---

在评论中，我们讨论了将视频居中(即使是超大尺寸)以及无论屏幕大小如何都让它填满视口(viewport)的问题。正确实现这一目标的唯一方法是使用 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/