全屏背景视频，并保持它居中 [英] Fullscreen background video and keep it centered

问题描述

我想创建一个网站，我有一个背景视频播放与一些HTML5。
这一切都工作完美，它的工作方式，我想要的。
但是我也希望将图片保持在屏幕中央，即使用户调整浏览器的大小。

I'm trying to create a site where I have a background video playing with some HTML5. This is all working perfectly, it works just the way I want it. But I also want to keep the image centered on the screen, even when a user resizes the browser.

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

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

I got this to work with some jQuery, but was wondering if there is a CSS solution for this.

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可能，但如果有人知道如何，这可能很好。

This is the jQuery I wrote to stretch the image to fit the screen, and to keep the image sort of centered. Not sure if this is possible in CSS, but if somebody knows how to, this might be nice.

推荐答案

此问题已被引用到地方视频100％高度& 100％width使用css或javascript

我想我的答案可能是你正在寻找的那个？

I guess my answer for that could be the one you were looking for?

下面是代码：

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>

工作小提示示例。

希望它会帮助别人：）

这篇关于全屏背景视频，并保持它居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！