在更小的div /容器中调整中心视频背景

我试图将中心视频背景调整到更小的div /容器中。我正在寻找什么样的例子是here（带自行车的视频）。视频以容器为中心，所以它切割了一些权利，剩下一些权利。我该怎么做？谢谢在更小的div /容器中调整中心视频背景

我试过这个代码，但不能很好地工作..因为我告诉那里，我需要包含和集中到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>

来源

2017-07-29 Piero Cini

视频通过改变填充之间的间隙检查我的回答是对你或无法正常运作？ –

请尝试以下这段代码。

我刚加了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

希望这会有所帮助。

来源

2017-07-29 06:42:39

我不认为我已经说清楚了，先生。我已经有一个全宽原始2列50％/ 50％，他们是正方形，我把全高，所以他们覆盖所有的高度，但问题是，他们对齐到左侧，我希望视频中心，正是我如何显示在帖子中的链接！这个代码对我没有帮助:( –

本替换你的CSS：

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

你可以控制你的股利和你在.gridvideo

来源

2017-07-29 08:06:11

我不认为我已经说清楚了，先生，我已经有了一个全宽原料，2列50％/ 50％，它们是方形的，所有的高度，但问题是，他们是左对齐，我希望视频中心，完全如何我显示在帖子中的链接！此代码不帮助我:( –

在更小的div /容器中调整中心视频背景

回答

相关问题