时间戳

首页 > 解决方案 > 如何创建具有一些边距的全屏背景视频？

jquery - 如何创建具有一些边距的全屏背景视频？

问题描述

我在登陆页面上有一个覆盖整个视口的全屏背景视频。我想实际包含视频，并在所有屏幕尺寸的左右显示一些白色。我尝试将容器的宽度和高度更改为不走运......我还添加了一些边距，但随着屏幕变小它们会消失。有什么想法吗？

    .vid {
      position: relative;
      height: 100vh;

 
    }

    .video-container:before {
      content:"";
      position: absolute;
      top:0;
      right:0;
      left:0;
      bottom:0;
      z-index:1;
      background: rgba(0,0,0,.75);
      opacity: .5;
      }


    .video-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: -1;
 
    }

    .bg-video {
     height: 100%;
     width: 100%;
     object-fit: cover;

     }
    <section class="vid p-5">
        <div class="video-container h-100">
            <video class="bg-video" autoplay muted loop>
              <source src="video/caleb-original.mp4" type="video/mp4">
              Your browser is not supported
            </video>
          </div>
          <div class="row h-100 text-white">
            <div class="container banner">
              <div class="row">
              <div class="col-lg-12 motto text-left">
                 
                  <h1 class="banner-heading  text-left">
                    We Believe<br> <span class="people">People Make<br> The Difference</span>
                    </h1>
                      <a href="#" class="launch-modal" data-modal-id="modal-video">
                                    <span class="hvr-grow u-media-player__icon u-media-player__icon--success">
                                      <span class="fa fa-play u-media-player__icon-inner"></span>
                                   </span>
                            </a>
                          </div>
                      </div>
                      </div>
                    </div>
            <div class="container">
         <div class="top-footer">
            <h5>Founded 2004</h5>
           <ul>
              <li><a href="https://twitter.com/theMassPayWay" target="_blank"  ><i class="fab fa-twitter"></i></a></li>
              <li><a href="https://www.facebook.com/theMassPayWay" target="_blank" ><i class="fab fa-facebook-f"></i></a></li>
              <li><a href="https://www.youtube.com/channel/UCfOk5GTwjjbOybKFQotRzmQ?view_as=subscriber" target="_blank"><i class="fab fa-youtube"></i></a></li>
              <li><a href="https://www.instagram.com/themasspayway" target="_blank" ><i class="fab fa-instagram"></i></a></li>
              <li><a href="https://www.linkedin.com/company/masspay" target="_blank" ><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
         </div>
        </div>
    </section>

标签： jqueryhtmlcsstwitter-bootstrap

解决方案

你需要设置width给你的父母div并给予margin:0 auto它div。

试试这个：

.vid {
    position: relative;
    height: 100vh;
    width: 80%;
    margin: 0 auto;
}

推荐阅读