如何创建与GraphicStock.com的视频横幅类似的全宽视频？

Question

我在“后效果”中创建了一个小的视频横幅，我试图让它看起来像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;
}

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。此实用工具将涵盖您为视频提供的任何容器，这正是您想要的- 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)
}