css - 获取具有相同相对大小的视频的div

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;
}