全屏背景视频并保持居中

Question

我正在尝试创建一个网站，我在其中播放一些HTML5背景视频。 这一切都很完美，它按照我想要的方式工作。 但我也希望将图像保持在屏幕中心，即使用户调整浏览器大小。

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>

我得到了这个与一些jQuery，但想知道是否有一个CSS解决方案。

function resizeHandler() {
        // scale the video
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        var ratio = $('#video').width() / $('#video').height();

        if((documentWidth / documentHeight) < ratio) {
            $('#video').css({
                'width': 'auto',
                'height': '100%',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginRight = $('#video').width() - $(document).width();
            $('#video').css('left', -marginRight);
        } else {
            $('#video').css({
                'width': '100%',
                'height': 'auto',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginTop = $('#video').height() - $(document).height();
            $('#video').css('top', -marginTop);
        }
    }

这是我写的jQuery，用于拉伸图像以适应屏幕，并使图像保持居中。 不确定这是否可以在CSS中使用，但如果有人知道如何，这可能会很好。

Answer 1

这个问题刚刚被引用到使用css或javascript的100％高度和100％宽度的Place视频

我想我的答案可能就是你要找的那个？

这是代码：

 header { position: relative; height: 100vh; z-index: 0; } header h1 { text-align: center; font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; color: #fff } header video { -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } 

 <header> <h1>Sample Title</h1> <video autoplay loop class="bg-video"> <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> </video> </header> 

这是一个工作小提琴的例子 。

希望它能帮助别人:)

Answer 2

我会尝试将视频居中放置在固定包装器内的绝对位置。 例如：

将视频放在100％宽度和高度的固定包装中：

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

使用margin auto将视频置于一个超大区域内：

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

并使用最小宽度和最小高度将其拉伸至完整尺寸：

#video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
} 

---

这里是最终结果：

 #video-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #video { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; min-width: 100%; min-height: 100%; width: auto; height: auto; } 

 <div id="video-wrap"> <video id="video" loop autoplay> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> </div> 

这里也是一个jsfiddle 。

Answer 3

这应该使#video成为视口的整个大小，并在用户滚动时保持在那里。

#video {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Answer 4

使用Css属性。 物体贴合：覆盖;

 body, html { padding: 0; margin: 0; height: 100%; width: 100%; } video { height: 100%; width: 100%; } 

 <video controls> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> </video>