在更小的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 /容器中調整中心視頻背景

回答

相關問題