全屏背景视频并使其保持居中

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实现，但如果有人知道如何做到这一点，那就太好了。

- woutr_be

---

你关心在CSS中实现这个的功能原因是什么？如果它能工作，那就行了。 - maxedison

不是真的，我只是好奇在CSS中是否可能实现，只是出于好奇。 - woutr_be

这会在任何浏览器大小下居中你的视频吗？ - Jorre

使用CSS实现这个最好的方法是使用object-fit属性。它适用于所有浏览器的视频，但不适用于IE和Edge。您可以在Microsoft Developer论坛上为它投票，网址在这里： https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for-all-media-elem?category_id=86947 在此期间，您可以使用JS polyfill，但如果它获得更多的投票，它将被实现。 - pjk_ok

Answer 1

这个问题已经被引用到了使用CSS或JavaScript将视频放置在100％高度和100％宽度的位置中。

我猜我的答案可能是你正在寻找的？

这是代码：

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>

这里有一个可用的fiddle示例。

希望它能帮助其他人 :)

- ala_747

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;
}

使用min-width和min-height将其拉伸到完整大小：

#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。

- pschueller

Answer 3

这应该使#video占据整个视口的大小，并在用户滚动时保持不变。

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

- alex

---

谢谢，但是它如何使视频适应浏览器窗口并按比例缩放呢？ 我已经使用了相同的CSS代码，但我无法用CSS重新创建我的jQuery。 - woutr_be

Answer 4

使用CSS属性 object-fit: cover;

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>

- Rafiqul Islam