html - 在较小的 div/容器中对齐中心视频背景

Question

我正在尝试将视频背景置于较小的 div/容器中。我正在寻找的一个例子是 here (带自行车的视频)。视频以容器为中心，因此它向右切一些向左切。我该怎么做？？谢谢

我试过这段代码，但效果不佳。正如我在上面所说的那样，我需要将该视频包含在 div 中并居中，这样它就会被左右剪切，就像我给你看的例子一样.

感谢所有愿意帮助我的人!

.video-backgroud {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  }

      <div class="gridvideo" itemprop="video">
        <video class="video-background" preload="auto" loop="" autoplay="" muted="" poster="http://tommasoottomano.com/wp-content/uploads/2017/07/back-sito-ok-copia-1.png" data-vps-id="0ccff4a1-e9d1-d6a7-f2af-836828e2b1b3" data-vps-speed="1">
          <source src="http://tommasoottomano.com/wp-content/uploads/2017/07/HOV_chapter-one_The-rule-of-Nature-sito.mp4" type="video/mp4">
        </video>
      </div>

Answer 1

用这个替换你的CSS:

         .gridvideo{
              display:block;
              position: absolute; 
              padding: 15px 10px;
            } 
             .video-backgroud {
            display: block;
            position: relative;
            }

您可以通过更改 .gridvideo

中的填充来控制 div 和视频之间的间隙