title: Reduce height of a DIV from top
body: <p>I have a DIV that lays over a YouTube video iframe.</p>
  
  <p><a href="http://jsfiddle.net/Ym5w8/42/" rel="nofollow">http://jsfiddle.net/Ym5w8/42/</a></p>
  
  <p>What I'm trying to do is reduce height of overlay <code>DIV (.the-box)</code> from top of it.</p>
  
  <p>For a example, like this.</p>
  
  <p><a href="http://jsfiddle.net/Ym5w8/43/" rel="nofollow">http://jsfiddle.net/Ym5w8/43/</a></p>
  
  <p>I know that I can just set height from the bottom but NO, what I'm trying to do is reduce height from top to bottom.</p>
  
  <p>Let's say I want to reduce size of the overlay DIV from <code>300px</code> ( means YouTube video will be clearly visible 300px from top to bottom. )</p>
  
  <pre><code>__________________________
  |         |               |
  |         |               |
  |         | 300px visible |
  |         |               |
  |        \/               |                    
  |                         |
  |  rest is still covered  |
  |________________________ |
  </code></pre>
  
  <p>It could be any amount, 300px, 200px, 50px. I'll be inserting the amount to CSS source from database.</p>
  
  <pre><code>.the-box { 
      reduce-from-top: &lt;?php echo $size ?&gt;px; 
      position: absolute; 
      left: 0px; 
      right: 0px; 
      width: 100%; 
      height: 100%; 
      z-index: 999; 
      background-color: white; 
      opacity: 0.5; 
  }
  </code></pre>