Question

我在顶级div的背景中播放视频。当屏幕尺寸很大时看起来很好，但是当我调整浏览器窗口大小以查看它在较小屏幕上的外观时，div的高度保持不变，在背景视频和下一个div之间留下一个很大的空白区域。

如果您想亲自查看以及特定代码，请参阅以下网站预览。 https://codepen.io/CarlyWysocki/pen/YYaBOd

HTML：

<div class="jumbotron" id="top">
  <video autoplay loop>
    <source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">

    Your browser does not support the video tag.
  </video>
  <div class="container text-center">
    <h1>Mac Demarco</h1>
    <h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
    <a href="#discography" class="scroll-down"><i class="fa fa-chevron-circle-down"></i></a>
  </div>
</div>

CSS：

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.container {
  position: relative;
}

Answer 1

如果它只是停留在中心，您可以添加适当调整大小的css媒体查询。也可以通过媒体查询将图片用于小屏幕。

使用引用的堆栈溢出答案：

print (df[2].str.split(',', expand=True))
   0   1   2   3   4   5   6   7   8   9   10  11  12
0  42  00  00  00  3E  51  1B  D7  42  1C  00  00  40
1  42  00  00  00  3E  51  1B  D7  42  1C  00  00  40
2  42  00  00  00  3E  51  1B  D7  42  1C  00  00  40

视频背景

1 个答案: