Div is dynamically sized to window height, but fails when more content is added to HTML

Question

I have a site with an HTML5 video that my client wants to fill the window completely (similar to this site ). I've accomplished this with CSS (object-fit: cover, width: 100%) and JQuery (container section's height set to window height, reset upon window resize). It works perfectly.

But when I add another section element containing text below the video (again, similar to the site linked above), it's like the JQuery isn't even there. The video container section's height is larger than it should be, yet not the default video height. Also, the new section with the text gets put behind the video so it's maybe half visible.

What's going on here? It's obvious that the new section is messing up the window height calculation in some way, but I can't figure out why or how to fix it.

$(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
    });
  }
}

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("/resources/img/atlanta-skyline.jpg");
  background-image: url("/resources/img/atlanta-skyline.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>

<main>
  <section class="full-width full-height video-container" id="header-vid">
    <video autoplay loop preload="none" poster="/resources/img/atlanta-skyline.jpg" id="home-video">
      <source src="/resources/vid/main-vid.mp4" type="video/mp4">
    </video>
  </section>
  <section class="full-width" 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>
  </section>
</main>

you don't need to define several functions on the resize event. so you can take all $(window).resize(function(){}); calls into one block, they get all fired the same time... — errand, Sep 10 '15 at 15:13
What do you want the text to do? Do you want it on top of the video, with the video occupying 100% of the window? — caasjj, Sep 10 '15 at 15:15
Since you only posted a snippet of HTML, be sure you're using a strict ` ` because jQuery can't understand the difference between window (viewport) and document if anything precedes your doctype. http://stackoverflow.com/questions/12103208/jquery-window-height-is-returning-the-document-height — fontophilic, Sep 10 '15 at 15:21
I want the text below the video, with the video filling the full page when the page first loads, and the text showing up only when you scroll down. — Kaitlyn Brown, Sep 10 '15 at 15:22

Gabriel Rodriguez · Accepted Answer · 2015-09-10T15:40:23.297

I would highly recommend get rid of the <main> and <section> tags as they are not friendly with video tags. As you can see here in this snippet, I modified it with simple divs, and it works fine.

$(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>

Still works the same when I replace main and section with divs. — Kaitlyn Brown, Sep 10 '15 at 15:25
Ok, sorry didn't got you first. Ok I just added an `.overlay` class to the css to achive what you want, take a look at the snippet again, I updated it. — Gabriel Rodriguez, Sep 10 '15 at 15:41
A good workaround, unfortunately what I need is for the text to be below the video so it can only be seen after scrolling down. You're onto something with the z-index, though, so I think I can take it from here! Thanks! — Kaitlyn Brown, Sep 10 '15 at 15:54
Ok, Now I am really lost, I thought that's what you wanted, like the other website. But anyway, good to hear, you can take it from there! — Gabriel Rodriguez, Sep 10 '15 at 16:00

Div is dynamically sized to window height, but fails when more content is added to HTML

1 Answers1