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

Question

Having trouble on subsequent divs, they overlap my video that is playing and all I want is just the h1 within the .home-video div to overlay the video. I put a border on the .home-video div and I can see my problem. My div is not the same relative size as the video which changes its size relative to the screen size. How can I get the div that holds the video to match the size of the video?

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

Instead of fixing the position of your video, you can just fix the position of your header.

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