如何創建類似於graphicstock.com視頻橫幅廣告的全寬視頻？

Question

我在After Effects中創建了一個小視頻橫幅，並且試圖讓它看起來像全幅和1/3高度的graphicstock.com，但它沒有顯示全寬，並且高度太大。

<div id="home" class="container "> 
    <div class="banner">  
     <div class="gs-homepage-redesign video-holder"> 
       <div class="video-wrapper"> 
        <video class="gs-homepage-redesign video" autoplay loop muted> 
         <source src="Comp 1.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
         <source src="Comp 1.webm" type='video/webm'> 
         <source src="Comp 1.mp4" type='video/mp4'> 
        </video> 
       </div> 
     </div> 
</div> 

和CSS

.banner .gs-homepage-redesign.video { 
    flex: none; 
    object-fit: cover; 
    width: 100%; 
    min-width: 350PX; 
    min-height: 200px; 
} 
audio, canvas, progress, video { 
    display: inline-block; 
    vertical-align: baseline; 
} 

.banner { 
    position: relative; 
    z-index: 10; 
    min-height: 300px; 
    padding: 0 0; 
} 

.banner .gs-homepage-redesign.video-holder { 
    position: relative; 
    overflow: hidden; 
    height: 500px; 
    color: #fff; 
} 

Answer 1

在這裏你去：

.banner .gs-homepage-redesign.video { 
 
    flex: none; 
 
    object-fit: cover; 
 
    width: 100%; 
 
} 
 
audio, 
 
canvas, 
 
progress, 
 
video { 
 
    display: inline-block; 
 
    vertical-align: baseline; 
 
} 
 
video { 
 
    background-color: red; 
 
    width: 100; 
 
    height: 30vh; 
 
    min-height: 300px; 
 
} 
 
.banner { 
 
    position: relative; 
 
    z-index: 10; 
 
    padding: 0 0; 
 
} 
 
.banner .gs-homepage-redesign.video-holder { 
 
    position: relative; 
 
    overflow: hidden; 
 
    color: #fff; 
 
}

<div id="home" class="container "> 
 
    <p>content befor video</p> 
 
    <div class="banner"> 
 
    <div class="gs-homepage-redesign video-holder"> 
 
     <div class="video-wrapper"> 
 
     <video class="gs-homepage-redesign video" autoplay loop muted> 
 
      <source src="Comp 1.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
 
      <source src="Comp 1.webm" type='video/webm'> 
 
      <source src="Comp 1.mp4" type='video/mp4'> 
 
     </video> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <p>content after video</p> 
 
</div>

Answer 2

的object-fit: cover;支持很差 - http://caniuse.com/#feat=object-fit

爲此，您最有可能需要javascript。此實用程序將覆蓋你提供力所能及的容器的視頻，這是你想要的 - https://github.com/Gottwik/video_cover

這是它的內部是如何工作的情況下，你想只是自己編寫它：

var video_ratio = video_element.width()/video_element.height() 

var size_ratio = container.width()/container.height() 

if (size_ratio < video_ratio) { 
    video_element 
     .css('height', container.height()) 
     .css('width', container.height() * video_ratio) 
     .css('left', -(video_element.width() - container.width())/2) 
} else { 
    video_element 
     .css('width', container.width()) 
     .css('height', container.width()/video_ratio) 
     .css('left', 0) 
}