Question

无论浏览器窗口的大小如何，我都不知道如何使背景视频居中。仅当将浏览器扩展为占据整个屏幕时，视频才会居中。 1920x1080；或大约。

我尝试了一些在这里找到的解决方案，但是我什么都无法工作。我是图形设计师，但是我可以编写基本的基本代码...并编辑其他人的工作，并遵循简单的说明。我被困在这里，将不胜感激任何帮助或建议。我希望有一个简单的解决方案...？谢谢。

下面是我现在拥有的代码部分...

这是网站：http://test2.scottyelle.com

有问题的视频BG位于index.html-OW.mp4的顶部

我也查看了这个问题/答案-Html5 video background, keep center of video in center

.video {
position: relative;
height: 40rem;
overflow: hidden;

}
#myVideo {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
}

.video-content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}




<section class="video home-section home-full-height" id="home">

<video loop autoplay muted playsinline id="myVideo">
<source src="assets/images/Beach/OW.mp4" type="video/mp4">
</video>

<div class="titan-caption">
<div class="caption-content">
<center>
<img class="img-responsive" src="assets/images/logo.svg" height="300px" width="300px"></div>
</center>
</div>
</div>

</section>

我希望/需要在用户更改浏览器窗口大小以及在移动设备上查看站点时，视频OW.mp4居中显示并可以缩放。

Answer 1

您可以将width: 100vw设置为ID #myVideo，以便它遵循调整窗口大小的宽度。

Answer 2

这是我使用的技巧：

HTML

<div class="video_container">
    <video preload="auto" playsinline="" autoplay="" muted="" loop="" id="heroVideo">
            <source src="path/to/video" type="video/mp4">
            Your browser does not support the video tag.
    </video>
</div>

CSS

.video_container {
    overflow: hidden;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.video_container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}

因为这必须放在主体的后面，所以请确保绝对值是相对于主体（或覆盖bg的div）而言的。

如何：无论浏览器大小如何变化，都可以使我的视频背景处于“可缩放”状态？

2 个答案: