Video modal is supposed to take up full height only of window ends up too tall

Question

Objective
Have a modal that takes up the full width and height but requires no scrolling.

Problem
The video controls are too low and forces scrolling. I want the default video to be at full height, no less, no more.

Current State
I have this demo on codepen.

enter image description here

When you click for the modal (by pressing the play icon), the modal control to the video are pushed down because of the height of the top bar which has the button to close the modal. But for some reason I cannot really alter the height of the top bar.

Code

HTML

<div class="homepage-video">
  <div class="hv-container">
    <div class="hv-player">
      <h3>Snowboarding Italy</h3>
      <p>Check out our latest video</p>
      <a href='#' onclick='overlay()'>
        <span class="hv-play">
          <i class="fa fa-play"></i>  
        </span>
      </a>
    </div>
  </div>
</div>

<div id="overlay">
  <div class="featured-video">
    <a href='#' onclick='overlay()'>
      <i class="fa fa-times-circle-o"></i>
    </a>

    <iframe src="//player.vimeo.com/video/17812340?color=2AD041" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

CSS

.homepage-video {
  background-color: black; 
  background-size: cover;
  background-repeat: no-repeat;
}

.homepage-video {
  background-image: url('http://37.media.tumblr.com/7aaf860fb237c4322c9c8f35a3f41350/tumblr_mui2rf7PAp1r59v3fo1_1280.jpg'); 
  background-position: center -60px; 
}

.hv-container {
  background-color: rgba(30,30,4, 0.6);
  min-height: 240px;
  position: relative;
}

.hv-player {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 30px;
  left:0; right: 0;
  padding-top: 20px;
  text-align:center;
}

.hv-player, .hv-player h3, .hv-play {
  color: #f4f3f3;
}

.hv-play {
  border: 3px solid #fff;
  cursor:pointer; 
  padding: 4px 18px;
  border-radius: 13px;
  font-size: 30px
}

/* reset for IE*/
body { height:100%; margin:0; padding:0; }

/* code */
#overlay {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  z-index: 1000;
}

#overlay { background-color: #222;}

/* must have these resets */
html, body{ height: 100%; padding: 0; margin: 0;}

/* code begins*/
.featured-video { height: 100%; width: 100%; }
.featured-video iframe {
  height: 100%;
  width: 100%;
  margin-right: auto; 
  margin-left: auto;
  vertical-align: middle; 
}

#overlay i {
  color: #999;
  font-size: 48px;
  margin: 10px;
}

html, body{ height: 100%; padding: 0; margin: 0;}

JS

function overlay() {
  el = document.getElementById("overlay");
  el.style.display = (el.style.display == "block") ? "none" : "block";
}

So what should the top bar be like in your desired scenario? No matter what height you give it, the sum of the height of the top bar and the video will exceed the viewport height, since you have set the iframe height to be 100%. Do you want the top bar to be positioned absolutely over the video, then? — Terry, Jun 16 '14 at 22:53
@Terry two possible solutions that I am considering is to have the close button to have a higher `z-index` but when I added that, it would not work. The other would be if say the close button had a height of 60, then the video could be 100% - 60px which I can arrive at by calc. but in order to support older browsers I think it might be safer to just give them percentages. I just don't understand what is giving the top bar that height and I did not find padding nor margin being passed from anywhere. — JGallardo, Jun 16 '14 at 23:16

score 1 · Accepted Answer · answered Jun 16 '14 at 23:39

I am not sure what desired layout do you want to achieve, but judging from your comments, perhaps it would be a good idea to position the <a> element absolutely within .featured-video. The reason why z-index does not work is because you did not declare a relative or absolute position on the said element (z-index does not work for position: static, which is the default value).

Also, the top space appears to be coming from your layout.css file, which specifies a top margin of 36px for .featured-video. By declaring a zero margin for that element partially solves the issue:

.featured-video {
  height: 100%;
  width: 100%;
  margin: 0;
  position: relative;
}

You can see that I have also added a position: relative property, so that we can position the closing button absolutely in it:

.featured-video a {
  background-color: rgba(0,0,0,.5);
  display: block;
  position: absolute;
}

See updated codepen: http://codepen.io/terrymun/pen/bplhI

Thank you, this worked perfect after I added `right: 0;` to the `.featured-video a` since it was covering the title of the video. — JGallardo, Jun 17 '14 at 00:17
Well I did run into one challenge though. When on mobile (safari), the video in the iframe is pushed to the middle of the page. It seems to be reading 100% of the total page height rather than 100% of the current browser window. — JGallardo, Jun 17 '14 at 00:53
That is a known bug/feature of iOS Safari. I think the design principle behind stretching an iframe to the full height of it's content is to avoid nested scrolling. http://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios — Terry, Jun 17 '14 at 05:47

Video modal is supposed to take up full height only of window ends up too tall

1 Answers1