相关疑难解决方法(0)

我正在尝试创建一个网站,我在其中播放一些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(); …