html - 背景视频响应

Question

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

Website

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