Question

在后续div上出现问题时，它们会重叠我正在播放的视频，而我想要的只是.home-video div中的h1来叠加视频。我在.home-video div上放了一个边框，我可以看到我的问题。我的div与相对于屏幕尺寸改变其大小的视频的相对大小不同。如何获取保存视频的div以匹配视频的大小？

html

<div class="home-video">
 <h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>s
 <video id="v" src="/views/img/Clip27.M4v" type="video/mov"  autoplay loop muted>
</div>

css

.home-video {
 position: relative;
 border: 5px solid black;
 text-align: center;
}

.home-video #v {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.home-video h1  {
  font-size: 3em;
  color: white;
  text-align: center;
  padding-top: 1em;
}

Answer 1

您可以直接修改标题的位置，而不是修复视频的位置。

JSFiddle example

<强> HTML

<div class="home-video">
 <h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>
 <video id="v" src="/views/img/Clip27.M4v" type="video/mov" autoplay loop muted></video>
 <div><p>Subsequent text is below the video</p></div>
</div>
<p>More text here</p>

<强> CSS

.home-video {
 position: relative;
 border: 5px solid black;
 text-align: center;
}

.home-video #v {
  width: 100%;
  height: auto;
  position: relative;
  z-index: -1;
}

.home-video h1  {
  font-size: 3em;
  color: white;
  text-align: center;
  padding-top: 1em;
  position:absolute;
  top: 0;
  left: 0;
}

获取视频相对大小相同的div

1 个答案: