视频的中心对齐ofwordpress .css遇到麻烦

Question

由于某种原因，我无法在最大程度地限制宽屏显示器时，在横幅上使用的视频在屏幕中心停留在我的公司oneoptics.io上的登陆页面上。所有其他元素似乎都保持中心，但视频拥抱了屏幕的左侧。任何帮助将不胜感激。这是当前正在使用的CSS。

body{
    font-family: 'Poppins', sans-serif!important;
}
.main_logo img{
    width: 100%;
}
#header{
    padding: 25px 0;
}
.main_menu{
    text-align: right;
    margin-top: 15px;
}
.menu_ul{
    padding: 0;
    margin: 0;
}
.menu_ul li{
    display: inline;
    padding: 0 0 0 90px;
}
.menu_ul li a{
    font-size: 20px;
    color: #000000;
    font-weight: 500;
}
.banner_sec{
<!--    background-image: url('http://www.oneoptics.io/wp-content/uploads/2022/06/100240044-aerial-drone-san-francisco-cit_H264HD1080.mp4'); -->
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 700px;
    width: 100%;
    position: relative;
}
.banner_overlay{
    background-color: #00000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.background-video {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    overflow: hidden;
}
@media (max-width: 5000px) {
.banner_sec{
    background-image: url('http://www.oneoptics.io/wp-content/uploads/2022/06/100240044-aerial-drone-san-francisco-cit_H264HD1080.mp4'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 700px;
    width: 100%;
    position: center;
}
}
.banner_txt{
    position: relative;
    z-index: 999;
    margin-top: 215px;
    text-align: center;
}
.banner_txt strong{
    font-size: 35px;
    color: #ffffff;
    font-weight: 500;
    display: block;
}
.banner_txt strong span{
    display: block;
    margin-top: 50px;
}
.banner_txt a{
    font-size: 22px;
    letter-spacing: 3px;
    color: #000000;
    font-weight: 400;
    background: #fff;
    transition-duration: 0.4s;
    margin-top: 180px;
    padding: 20px 75px;
    display: inline-block;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
}
.banner_txt a:hover{
    background: #000;
    color: #fff;
}

Answer 1

您可以将背景视频和浮动文本的部分分开 -

<section class="banner_sec">
    <div class="background-video">
        <video autoplay="" loop="" muted="" poster="http://www.oneoptics.io/wp-content/uploads/2022/06/Untitled-1.jpg">
            <source src="http://www.oneoptics.io/wp-content/uploads/2022/06/100240044-aerial-drone-san-francisco-cit_H264HD1080.mp4" type="video/mp4">
        </video>
    </div>
</section>

<section class="banner_overtext">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="banner_txt">
                    <strong>Curated Connectivity Products For<span> Data Center, CATV & Wireless </span></strong>
                    <a href="mailto:[email protected]" class="banner_btn">Learn More</a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner_overlay"></div>
</section>

然后更改两个部分的CSS。

.banner_sec {
    background-image: url(http://www.oneoptics.io/wp-content/uploads/2022/06/100240044-aerial-drone-san-francisco-cit_H264HD1080.mp4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 700px;
    width: 100%;
    position: absolute;
}
.background-video {
    height: 100%;
    z-index: -1;
    overflow: hidden;
    margin: 0 auto;
}
@media (max-width: 5000px) {
    .banner_sec {
        margin: 0 auto;
        text-align: center;
    }
}