包含自舉列中的mp4視頻

我想在自己的網站上觀看視頻。但視頻與圖片不一樣高，我需要這個固定的。我怎樣才能確保視頻覆蓋整個列，並且是相同的高度另外兩列，在任何時候都包含自舉列中的mp4視頻

目前，這是我的代碼：

<div class="container" style="width: 100%;"> 
     <div class="row"> 
      <div class="col-md-4 fullscreen-bg"> 
      <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> 
      <source src="video/kerntrekken.mp4" type="video/mp4"> 
      </video> 
      </div> 
      <div class="col-md-4" style="padding: 0;"> 
       <img src="img/Kluizen.jpg" width="100%" height="354"> 
      </div> 
      <div class="col-md-4" style="padding: 0;"> 
       <img src="img/Kluizen.jpg" width="100%" height="354"> 
      </div> 
     </div> 
    </div>

這是我的CSS：

.fullscreen-bg { 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -100; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.fullscreen-bg__video { 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
}

https://i.gyazo.com/8210a9c6a5e0aa01225526fa70987b65.png

來源

2017-09-06 Stefan Tanis

視頻標籤可以採取的寬度和高度爲100％

<video width="100%" height="100%" controls> 
 
    <source src="movie.mp4" type="video/mp4"> 
 
    <source src="movie.ogg" type="video/ogg"> 
 
    Your browser does not support the video tag. 
 
</video>

來源

2017-09-06 09:48:52

通常你不能設置視頻對象的高度。然而，被稱爲 object-fit

您可能需要設置的所有塊的高度與該行中的視頻，比如一個簡單的CSS破解：

.col-md-4 img { height: 200px; } 
.col-md-4 video { 
    height: 200px; 
    object-fit: fill; 
}

做不到這一點，只是用以下就足夠了：

.col-md-4 video { 
    object-fit: fill; 
}

給他們兩個測試！請參閱：

來源

2017-09-06 10:00:07 Colin

包含自舉列中的mp4視頻

回答

相關問題