背景视频响应答案

【问题标题】：Background video responsive背景视频响应
【发布时间】：2016-05-10 18:43:26
【问题描述】：

有没有办法让视频具有响应性？
在手机上，视频太大了。我试过给它width : 100% 和height: auto，但是有白条。

【问题讨论】：

标签： html css video background responsive

【解决方案1】：

它会根据宽度自动调整高度。

HTML

<div class="flex-video">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.flex-video {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    margin-bottom: 1rem;
    overflow: hidden;
}
.flex-video iframe, .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

从http://foundation.zurb.com/sites/docs/flex-video.html复制的代码

【讨论】：

【解决方案2】：

我更喜欢将 jQuery 库用于背景视频。它将完美地工作。示例如下：

http://dfcb.github.io/BigVideo.js/example-ambient.html

【讨论】：