Div是根据窗口高度动态调整大小的，但在HTML中添加更多内容时失败

我强烈建议摆脱<main>和<section>标签，因为它们与video标签不友好。正如您在这段代码中看到的，我用简单的divs修改了它，它工作得很好。

$(document).ready(function() {
  // Get window dimensions
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  var winRatio = winWidth / winHeight;
  console.log("The window height is: " + winHeight);
  console.log("The window width is: " + winWidth);
  console.log("The window ratio is: " + winRatio);
  // Get window dimensions again upon resize
  $(window).resize(function() {
    winWidth = $(window).width();
    winHeight = $(window).height();
    console.log("The window height is: " + winHeight);
    console.log("The window width is: " + winWidth);
  });
  // Get video height (width will always be equal to window width)
  var vidHeight = $("#home-video").height();
  console.log("The video height is: " + vidHeight);
  // Get video height again upon resize
  $(window).resize(function() {
    vidHeight = $("#home-video").height();
    console.log("The video height is: " + vidHeight);
  });
  // If screen is at least 992px wide (most desktops), load video with page
  if (winWidth > 992) {
    $("video#home-video").attr("preload", "auto");
  }
  sizeToWindow(vidHeight, winHeight);
  $(window).resize(function() {
    sizeToWindow(vidHeight, winHeight);
  })
});
function sizeToWindow(vidHeight, winHeight) {
  // If screen height and header-vid section height are not equal, set section height to window height to fill screen
  if (winHeight !== vidHeight) {
    var heightString = winHeight.toString();
    heightString = heightString.concat("px");
    $("#header-vid").css({
      "height": heightString
    });
  }
}

.overlay {
    position:absolute;
    bottom:0;
    left:0;
    z-index:1;
}
.main {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.main .section .full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}
.main .video-container {
  margin: 0;
  padding: 0;
  background-image: url("http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg");
  background-image: url("http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.main video#home-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 991px) {
  main video#home-video {
    opacity: 0;
  }
}
.main h1.overlaid-text {
  font-family: Merriweather, serif !important;
  position: absolute;
  color: white;
  font-size: 5em;
  top: 20%;
  left: 30%;
  opacity: 0.9;
}
.main section#vision-container {
  background: #f7a11a;
  background: #f7a11a;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <div class="section full-width full-height video-container" id="header-vid">
    <video autoplay loop preload="none" poster="http://georgiainfo.galileo.usg.edu/images/uploads/gallery/atlanta1976.jpg" id="home-video">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
  </div>
   <div class="section full-width overlay" id="vision-container">
    <h3>Within the next 5 years, we will grow to originate $400 million dollars a month in purchase money mortgages across 20 markets in the United States. In those markets we will be recognized as innovators of mortgages processing, supporteres of consumer transparency while maintaining our reputation as the mortgage bank with the highest employee satisfation among our peers.</h3>
  </div>
</div>