如何：使我的视频背景居中和可缩放，无论浏览器大小如何变化？答案

【问题标题】：How to: make my video background CENTERED & SCALABLE, no matter change in browser size?如何：使我的视频背景居中和可缩放，无论浏览器大小如何变化？
【发布时间】：2019-06-23 05:33:10
【问题描述】：

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

我已经尝试了一些我在这里找到的解决方案，但我什么都做不了。我是一名平面设计师，但我可以编写基本的基本代码......并编辑其他人所做的，并按照简单的说明进行操作。我被困在这里，非常感谢任何帮助或建议。我希望有一个简单的解决方案......？谢谢。

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

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

有问题的视频背景位于 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 居中显示并且可缩放。

【问题讨论】：

标签： css video background html5-video fullscreen

【解决方案1】：

这是我使用的技巧：

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

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

【讨论】：