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和视频之间的差距

Answer 2

请尝试以下代码。

我刚刚将margin: 0px auto;添加到video.video-background课程。所以使用margin:0px auto它会将视频设置在屏幕中央。

video.video-background {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0px auto; // added this property as new
  }

如果视频容器仍然没有使用上面的课程，那么请添加课程。

.gridvideo{display:block;} // Here you can set display:flex

希望这有帮助。

在较小的div /容器

2 个答案: