我在After Effects中创建了一个小视频横幅,我试图使它看起来像graphicstock.com的全宽和1/3高度但它没有显示全宽并且高度也是大。
<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;
}
答案 0 :(得分: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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
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)
}