Question

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

Answer 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

复制的代码

Answer 2

我更喜欢使用jQuery库来制作背景视频。它会很完美。这是一个例子：

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

背景视频响应

2 个答案: